HTML如何设置选中第二个复选框才显示提交按钮 解决跨浏览器问题

• 逻辑判断偏差：原checkedChanged函数仅判断当前触发事件的复选框是否被选中，完全没有累计统计全表单内的已选复选框总数，只要勾选任意1个选项就会触发按钮启用逻辑，因此勾选第一个复选框时就会出现不符合预期的显示效果。
• 跨浏览器兼容问题来源：
  • 脚本块内包含未引入依赖的jQuery代码（$(".no_option").on("click", ...)），没有加载jQuery库的浏览器会直接抛出脚本语法错误，中断后续所有代码执行。
  • 提交按钮初始状态未做隐藏处理，仅设置了禁用属性，和需求要求的“默认隐藏”逻辑不符。
  • 元素属性赋值写法不规范，对disabled属性的赋值未遵循标准DOM规范，部分旧版浏览器无法正确识别元素状态。
  • 提交按钮的onclick绑定了无实际作用的getElementById('accept')，没有配置任何有效交互逻辑。

• 给所有需要统计的复选框添加统一类名（如option-checkbox），方便批量获取元素、统计选中数。
• 调整提交按钮初始状态，同时设置hidden和disabled属性，默认完全隐藏且不可交互。
• 重写状态变动处理逻辑：每次复选框状态变化时，先统计全表单下处于选中状态的复选框总数，再根据总数更新按钮状态：
  • 选中数量大于等于2时：移除按钮的隐藏、禁用状态，替换为可点击的橙色样式。
  • 选中数量小于2时：重新给按钮加上隐藏、禁用状态，换回灰色禁用样式。
• 删除无依赖的jQuery冗余代码，全程使用原生DOM API实现逻辑，不依赖第三方库，保证全浏览器兼容。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <style>
      p {
        font-family: 'Lato', sans-serif;
      }
      .button-orange {
        text-shadow: 2px 2px #321;
        float: left;
        width: 100%;
        border: #fbfbfb solid 4px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px 3px #999;
        cursor: pointer;
        background-color: #E74700;
        color: white;
        font-size: 34px;
        padding-top: 22px;
        padding-bottom: 22px;
        transition: all 0.3s;
        margin-top: -4px;
        font-weight: 700;
      }
      .button-orange:hover {
        background-color: red;
      }
      .button-grey {
        text-shadow: 2px 2px #321;
        float: left;
        width: 100%;
        border: #fbfbfb solid 4px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px 3px #999;
        cursor: not-allowed;
        background-color: #999;
        color: white;
        font-size: 24px;
        padding-top: 22px;
        padding-bottom: 22px;
        transition: all 0.3s;
        margin-top: -4px;
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <p>累计选中任意2个复选框时，提交按钮才会显示并启用</p>
    <form action="/action_page.php" method="get">
      <input type="checkbox" value="checkbox" class="option-checkbox" />01
      <input type="checkbox" value="checkbox" class="option-checkbox" />02
      <input type="checkbox" value="checkbox" class="option-checkbox" />03
      <input type="checkbox" value="checkbox" class="option-checkbox" />04
      <br><br><br>
      <input 
        disabled 
        hidden 
        type="button" 
        id="accept" 
        class="button-grey" 
        value=" SUBMIT " 
      >
    </form>
    <script>
      const checkboxes = document.querySelectorAll('.option-checkbox');
      const submitBtn = document.getElementById('accept');
      function updateSubmitState() {
        // 统计当前选中的复选框总数
        const checkedCount = document.querySelectorAll('.option-checkbox:checked').length;
        if (checkedCount >= 2) {
          // 满足选中2个及以上的条件：显示、启用按钮
          submitBtn.hidden = false;
          submitBtn.disabled = false;
          submitBtn.className = 'button-orange';
        } else {
          // 选中数不足2个：隐藏、禁用按钮
          submitBtn.hidden = true;
          submitBtn.disabled = true;
          submitBtn.className = 'button-grey';
        }
      }
      // 为每个复选框绑定状态变化监听
      checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateSubmitState);
      });
    </script>
  </body>
</html>

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