给定复选框的值，禁用/隐藏复选框列表中的复选框（纯 JS）

Question

我正在尝试禁用或隐藏复选框列表中的某些复选框，给定允许选择的最大复选框数。即如果复选框的值大于 my_value 则复选框被禁用/隐藏并且不能被选中......并将其工作到此代码中：

<div class="container">

  <table class="table">

    <thead>

      <tr>

        <th align="left">Max Number of Checks</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>

          <input id="Check_01" name="FW_check" value="1" type="checkbox" />

          <input id="Check_02" name="FW_check" value="2" type="checkbox" />

          <input id="Check_03" name="FW_check" value="3" type="checkbox" />

          <input id="Check_04" name="FW_check" value="4" type="checkbox" />

          <input id="Check_05" name="FW_check" value="5" type="checkbox" />

        </td>

      </tr>

      <tr>

        <td>

          <input id="Check_06" name="FW_check" value="6" type="checkbox" />

          <input id="Check_07" name="FW_check" value="7" type="checkbox" />

          <input id="Check_08" name="FW_check" value="8" type="checkbox" />

          <input id="Check_09" name="FW_check" value="9" type="checkbox" />

          <input id="Check_10" name="FW_check" value="10" type="checkbox" />

        </td>

      </tr>

    </tbody>

  </table>

</div>

Answer 1

我假设以下内容：my_value（复选框的最大值）设置在此代码之外的某处表中具有 name 属性的所有复选框FW_check看起来像您在上面发布的输入元素（主要意味着它们value是有效数字）也就是说，我建议您执行以下操作：获取表中每个input[name="FW_check"]的列表，使用document.querySelector遍历这些复选框，检查value输入，并设置disabled = true该值是否大于最大值。这是一些可以完成此操作的基本代码：const my_value = // some number that you have defined elsewhere, as mentioned aboveconst checkboxes = document.querySelector('.table input[name="FW_check"]');for (const checkbox of checkboxes) {&nbsp; const value = Number.parseInt(checkbox.value, 10); // note the base 10. in case you accidentally put a 0 before a number, it still parses correctly and doesn't assume base 8&nbsp; checkbox.disabled = value > my_value; // this will handle re-enabling the checkbox if this function is run again after my_value drops}这当然可以根据需要运行多次，放入函数等。

Answer 2

如果我正确理解你的问题，这就是你要找的。var max = 5;var checkboxes = document.getElementsByName("FW_check");for(var i=0;i<checkboxes.length;i++){&nbsp; &nbsp; if(i<max){&nbsp; &nbsp; checkboxes[i].disabled = false;&nbsp; } else {&nbsp; &nbsp; checkboxes[i].disabled = true;&nbsp; }}<div class="container">&nbsp; <table class="table">&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th align="left">Max Number of Checks</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="Check_01" name="FW_check" value="1" type="checkbox" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="Check_02" name="FW_check" value="2" type="checkbox" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="Check_03" name="FW_check" value="3" type="checkbox" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="Check_04" name="FW_check" value="4" type="checkbox" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="Check_05" name="FW_check" value="5" type="checkbox" />&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="Check_06" name="FW_check" value="6" type="checkbox" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="Check_07" name="FW_check" value="7" type="checkbox" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="Check_08" name="FW_check" value="8" type="checkbox" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="Check_09" name="FW_check" value="9" type="checkbox" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="Check_10" name="FW_check" value="10" type="checkbox" />&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table></div>