给定复选框的值，禁用/隐藏复选框列表中的复选框（纯 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 above

const checkboxes = document.querySelector('.table input[name="FW_check"]');

for (const checkbox of checkboxes) {

  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

  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++){

    if(i<max){

    checkboxes[i].disabled = false;

  } else {

    checkboxes[i].disabled = true;

  }

}

<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>