选中指定数量复选框后禁用其余复选框，文本仍可修改的问题

嘿，这个问题我之前也碰到过！核心原因是你只处理了复选框的禁用状态，但没同步处理它关联的文本元素——毕竟文本本身不是表单控件，默认不会跟着复选框一起被禁用。咱们可以从这两个方向来修复：

1. 把复选框和文本包裹在可禁用的容器中 #

最省心的方式是用<fieldset>把每组复选框和对应的文本包起来，当需要禁用时，直接给<fieldset>添加disabled属性。这样不仅复选框会被禁用，里面的文本也会自动呈现灰化的禁用样式，同时阻止用户的交互操作：

<fieldset class="checkbox-group">
  <input type="checkbox" id="opt1">
  <label for="opt1">选项1文本</label>
</fieldset>
<fieldset class="checkbox-group">
  <input type="checkbox" id="opt2">
  <label for="opt2">选项2文本</label>
</fieldset>

然后在你的JS逻辑里，当需要禁用某一组时，找到对应的<fieldset>并设置disabled：

// 假设你已经获取了要禁用的fieldset元素
targetFieldset.disabled = true;

2. 单独给关联文本添加禁用样式和事件阻止 #

如果不想用fieldset，也可以手动找到每个复选框对应的文本元素（比如标签），给它们添加禁用样式，同时阻止点击/选择事件：

第一步：添加CSS禁用样式 #

.text-disabled {
  color: #999;
  cursor: not-allowed;
  user-select: none; /* 阻止文本被选中复制 */
}

第二步：在JS中同步处理文本元素 #

当你禁用复选框时，找到它对应的（或者其他文本容器），添加上述样式，并阻止事件：

// 假设checkbox是当前要禁用的复选框元素
checkbox.disabled = true;
// 找到对应的label
const label = document.querySelector(`label[for="${checkbox.id}"]`);
if (label) {
  label.classList.add('text-disabled');
  // 阻止点击事件，避免用户通过点击文本触发复选框
  label.addEventListener('click', (e) => e.preventDefault());
}

如果是取消禁用，记得同步移除样式和事件监听哦！

这样处理后，不仅复选框会被禁用，关联的文本也会看起来不可用，同时无法被用户修改或触发交互啦。

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