禁用选择/复选框 当选择/选中另一个时

Disable the Selection/Check box When the other one is Selected/Checked

本文关键字：选择 另一个 复选框      更新时间：2023-09-26

我的代码看起来像这样，我想要的是当使用单击当前时间复选框然后禁用时间选择栏时，当用户在选择栏中选择某些内容时，禁用当前时间复选框，我知道这是可以实现的，但我不知道该怎么做，我累了一些方法，但没有一种有效， 请告诉我如何通过JavaScript或CSS做到这一点，非常感谢 

 Enter travel time <input type="time" name="usr_time">   
 Use current time  <input type = "checkbox" name = "Currenttime" value = "Currenttime">

这就是我会这样做的：

function checkControl(){
    if(Currenttime.checked === false){
        usr_time.disabled = false;
    }else{
        usr_time.disabled = true;
    }
}

这是JSFiddle演示

另请注意，id属性已添加到这两个元素中，以便可以操作其属性。

  • 将document.querySelector与attribute选择器一起使用以选择目标元素。
  • addEventListener change元素上附加check-box事件。
  • disabled属性disable user_time元素。
  • this.checked将是check-box元素的当前状态。

document.querySelector('[name="Currenttime"]').addEventListener('change', function() {
  document.querySelector('[name="usr_time"]').disabled = this.checked;
});
Enter travel time
<input type="time" name="usr_time">Use current time
<input type="checkbox" name="Currenttime" value="Currenttime">

相关文章：