如何实现点击复选框（checkbox）勾选时禁用另一选项、取消勾选时恢复可用？

问题根因 #

disabled是HTML的布尔属性，只要元素上存在该属性，无论属性值设置为true还是false，都会使元素进入禁用状态。你在取消勾选时调用setAttribute("disabled", "false")的写法无法解除禁用，才会出现另一个复选框一直灰化的问题。

修复方案 #

方案1：直接修改原有代码逻辑 #

把两个函数中设置disabled的逻辑，改为直接操作DOM元素的disabled布尔属性即可，修改后的JS代码如下：

function hideFemaleCheckBox() {
  let maleCheckBox = document.getElementById('maleCheckBox');
  let femaleCheckBox = document.getElementById('femaleCheckBox');
  // 直接给disabled属性赋值布尔值，不需要用setAttribute
  femaleCheckBox.disabled = maleCheckBox.checked;
}

function hideMaleCheckBox() {
  let maleCheckBox = document.getElementById('maleCheckBox');
  let femaleCheckBox = document.getElementById('femaleCheckBox');
  maleCheckBox.disabled = femaleCheckBox.checked;
}

HTML部分不需要做任何修改，原来的行内点击事件绑定可以保留。

方案2：优化为通用函数，减少代码冗余 #

如果你不想写两个重复逻辑的函数，可以改成参数传递的通用写法：
HTML修改为：

<label>
  <input type="checkbox" onClick="toggleCheckBox('male')" value="male" id="maleCheckBox">
  Male
</label>
<label>
  <input type="checkbox" onClick="toggleCheckBox('female')" value="female" id="femaleCheckBox">
  Female<br><br>
</label>

对应的JS代码：

function toggleCheckBox(type) {
  const male = document.getElementById('maleCheckBox');
  const female = document.getElementById('femaleCheckBox');
  if (type === 'male') {
    female.disabled = male.checked;
  } else {
    male.disabled = female.checked;
  }
}

两种方案都可以实现你要的互斥效果：勾选其中一个时另一个禁用，取消勾选后另一个恢复可点击状态。

内容的提问来源于stack exchange，提问作者HustlerSnow