Checkbox单选互斥功能实现求助：勾选后禁用其余复选框

嘿，我发现你的代码没生效的核心问题是找不到目标表单元素——你JS里一直在用document.getElementById("checkForm")，但你的HTML里根本没有这个id的元素！另外还有几个小细节（比如disabled的赋值方式、事件重复绑定）需要调整，下面是修复后的完整代码，我会把修改点都说明白：

修复后的HTML代码 #

我给复选框的容器加上了id="checkForm"（或者你也可以直接用现有的taraf_keselamatan_fail，只要JS里对应修改就行）：

<div class="form-group" id="taraf_keselamatan_fail"> 
  <label for="cp1" class="control-label col-lg-4">Taraf Keselamatan Fail:</label> 
  <div class="col-lg-3" id="checkForm"> 
    <input type="checkbox" name="rahsia_besar" id="rahsia_besar" value="1"><b> Rahsia Besar</b>&nbsp;&nbsp;&nbsp; 
    <input type="checkbox" name="rahsia" id="rahsia" value="1"><b> Rahsia</b>&nbsp;&nbsp;&nbsp; 
    <input type="checkbox" name="sulit" id="sulit" value="1"><b> Sulit</b>&nbsp;&nbsp;&nbsp;<br> 
    <input type="checkbox" name="terhad" id="terhad" value="1"><b> Terhad</b>&nbsp;&nbsp;&nbsp; 
    <input type="checkbox" name="terbuka" id="terbuka" value="1"><b> Terbuka</b>&nbsp;&nbsp;&nbsp; 
  </div> 
</div>

（注：原HTML里的<input>是自闭合元素，我帮你去掉了多余的</input>标签）

修复后的JavaScript代码 #

<script>
// 现在能正确获取到复选框所在的容器了
var form = document.getElementById("checkForm");
// 只绑定change事件就够，不需要重复绑定click委托
addChangeHandlers(form);

function addChangeHandlers(form) {
  for(var i=0;i<form.elements.length;i++) {
    var element = form.elements[i];
    if(element.tagName === "INPUT" && element.type === "checkbox") {
      element.onchange = checkBoxChanged;
    }
  }
}

function checkBoxChanged() {
  if(this.checked) {
    disableOtherCheckBoxes(this.id, form);
  } else {
    enableAllCheckBoxes(form);
  }
}

function disableOtherCheckBoxes(currentId, form) {
  // 遍历所有复选框，禁用除当前选中之外的所有
  for(var i=0;i<form.elements.length;i++) {
    var element = form.elements[i];
    if(element.tagName === "INPUT" && element.type === "checkbox") {
      // 只有不是当前选中的复选框才禁用，同时取消勾选避免状态混乱
      if(element.id !== currentId) {
        element.disabled = true;
        element.checked = false;
      }
    }
  }
}

function enableAllCheckBoxes(form) {
  // 恢复所有复选框的可勾选状态
  for(var i=0;i<form.elements.length;i++) {
    var element = form.elements[i];
    if(element.tagName === "INPUT" && element.type === "checkbox") {
      element.disabled = false;
    }
  }
}
</script>

关键修改点说明： #

1. 修复元素获取问题：把JS里的目标容器换成HTML中存在的checkForm，这样事件才能正确绑定到复选框上。
2. 简化事件绑定：去掉了重复的点击事件委托，只保留复选框的change事件，逻辑更清晰，避免冲突。
3. 优化禁用/启用逻辑：
   • disableOtherCheckBoxes直接遍历所有复选框，禁用除当前选中之外的所有，不需要维护冗长的blacklist数组，代码更简洁易维护。
   • 禁用其他复选框时顺便取消它们的勾选状态，避免出现“禁用但仍勾选”的混乱状态。
4. 规范disabled赋值：用布尔值true/false来设置禁用状态，这是标准的DOM操作方式，比字符串更可靠。

现在你测试一下，勾选任意一个复选框，其他四个会自动禁用并取消勾选；取消勾选当前复选框，所有复选框都会恢复可勾选状态，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Pi Network Crytocurrency