基于jQuery实现点击单个复选框后禁用该复选框的方法

嘿，我来帮你搞定这个需求！你想要点击任意一个复选框后，直接禁用被点击的那个对吧？咱们分两种方式来实现，你可以根据自己的代码风格选：

方式一：内联点击事件（简单直接） #

这种方式最直观，直接给每个复选框加上onclick事件，点击时直接禁用自身。注意哦，每个复选框的id要保持唯一，不能都用checkBoxStudents，不然会有冲突：

<input type='checkbox' name='checkboxStudents' id='checkBoxStudent1' onclick="this.disabled = true" />
<input type='checkbox' name='checkboxStudents' id='checkBoxStudent2' onclick="this.disabled = true" />
<input type='checkbox' name='checkboxStudents' id='checkBoxStudent3' onclick="this.disabled = true" />

这里的this就指代当前被点击的复选框元素，把它的disabled属性设为true，就能立刻禁用它啦。

方式二：事件监听（更优雅，利于维护） #

如果不想把JS代码和HTML混在一起，这种方式更合适。先给所有复选框加一个共同的类名，然后用JavaScript统一绑定事件：

HTML部分 #

<input type='checkbox' name='checkboxStudents' id='checkBoxStudent1' class="student-checkbox" />
<input type='checkbox' name='checkboxStudents' id='checkBoxStudent2' class="student-checkbox" />
<input type='checkbox' name='checkboxStudents' id='checkBoxStudent3' class="student-checkbox" />

JavaScript部分 #

// 获取所有带student-checkbox类的复选框
const checkboxes = document.querySelectorAll('.student-checkbox');

// 给每个复选框绑定点击事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', function() {
    // 禁用当前被点击的复选框
    this.disabled = true;
    
    // 可选：如果需要确保点击后复选框处于选中状态，可以加上这行
    // this.checked = true;
  });
});

这种方式把HTML和JS分离，后续如果要修改逻辑，直接改JS代码就行，不用挨个改HTML里的内联事件。

如果你的需求里还需要点击后强制复选框处于选中状态（毕竟禁用后就没法再切换了），就把注释里的this.checked = true;去掉注释加上就行。

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