JavaScript复选框最多2个未勾选限制失效，如何修复并实现弹窗？

需求：5个默认全部勾选的复选框，最多允许2个处于未勾选状态，至少保持3个勾选；当未勾选数量超过2时弹出提示，并阻止继续取消勾选。

原代码的问题 #

你的JavaScript代码未生效，核心问题有两个：

• 统计未勾选数量的逻辑错误：代码里没有正确累加未勾选的总数，反而错误地将单个复选框的未勾选状态和限制值做比较，逻辑完全不通
• 没有处理超限后的操作：就算统计对数量，也没阻止用户继续取消勾选，无法达到限制效果

修复后的代码 #

HTML（保持原结构即可） #

<div id="excludedNumbers">
  <div class="form-group">
    <div class=" form-check">
        <input class="form-check-input" checked type="checkbox" value="0" id="add0">
        <label class="form-check-label" for="add0">0</label>
     </div>
     <div class="form-check">
         <input class="form-check-input" checked type="checkbox" value="1" id="add1">
         <label class="form-check-label" for="add1">1</label>
     </div>
     <div class="form-check">
        <input class="form-check-input" checked type="checkbox" value="2" id="add2">
        <label class="form-check-label" for="add2">2</label>
     </div>
     <div class="form-check">
         <input class="form-check-input" checked type="checkbox" value="3" id="add3">
         <label class="form-check-label" for="add3">3</label>
     </div>
     <div class="form-check">
         <input class="form-check-input" checked type="checkbox" value="4" id="add4">
         <label class="form-check-label" for="add4">4</label>
     </div>
      <div class="form-check">
         <input class="form-check-input" checked type="checkbox" value="5" id="add5">
         <label class="form-check-label" for="add5">5</label>
     </div>
</div>

JavaScript #

const checkBoxesEnabled = document.querySelectorAll('.form-check-input');
const limit = 2;

checkBoxesEnabled.forEach(checkbox => {
  checkbox.addEventListener('click', function(e) {
    // 统计当前未勾选的复选框总数
    const uncheckedCount = Array.from(checkBoxesEnabled).filter(cb => !cb.checked).length;
    
    // 若未勾选数量超过限制
    if (uncheckedCount > limit) {
      alert('你不能取消超过2个选项');
      // 恢复当前复选框的勾选状态，阻止超限操作
      e.target.checked = true;
    }
  });
});

代码说明 #

• 用forEach遍历复选框，比传统for循环更简洁易读
• 点击事件触发时，先通过filter统计所有未勾选的复选框数量
• 一旦检测到数量超限，弹出提示并将当前点击的复选框恢复为勾选状态，确保始终符合最多2个未勾选的规则

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