基于前一个复选框选择禁用/启用下一个复选框的jQuery实现问题

我来帮你搞定这个功能！你当前的代码没法正常工作，核心原因是你选中的复选框的next()元素并不是下一个复选框——每个复选框都包裹在.checkboxes类的<label>标签里，$(this).next()只会找到当前<label>里的文本节点（比如"Option1"），根本碰不到下一个<label>里的目标复选框。

修正后的代码 #

只需要调整JavaScript里获取下一个复选框的逻辑即可，HTML和CSS不需要改动：

$(function() {
  // 用on()替代bind()，jQuery 1.7+推荐使用on()绑定事件
  $('.checkboxes input[type=checkbox]').on("click", function() {
    // 关键：先找到当前复选框所在的label，再定位下一个label里的复选框
    const nextCheckbox = $(this).closest('.checkboxes').next().find(':checkbox');
    
    if ($(this).is(':checked')) {
      nextCheckbox.prop("disabled", true);
    } else {
      nextCheckbox.prop("disabled", false);
    }
  });
});

关键改动解释 #

1. closest('.checkboxes')：向上遍历DOM树，找到当前复选框所在的父级<label class="checkboxes">元素，这是定位下一个选项的起点。
2. next()：获取当前<label>的下一个同级<label>元素（也就是下一个选项容器）。
3. find(':checkbox')：在找到的下一个选项容器里，定位到具体的复选框元素。
4. 替换bind()为on()：bind()是jQuery的旧版事件绑定方法，on()是1.7版本后推荐的统一事件绑定API，功能更强大且兼容性更好。

额外说明 #

• 如果是最后一个复选框，它的下一个同级元素不存在，此时nextCheckbox会是一个空的jQuery对象，代码执行时不会报错，也不会有任何无效操作，无需额外处理边界情况。
• 测试时你会发现：选中任意复选框，它的下一个复选框会立刻被禁用；取消选中后，下一个复选框会恢复可用，完全符合你的需求。

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