如果未选中第一个表的至少一个复选框，则无法使用 JavaScript 选中第二个表的任何复选框

Question

我有两个表，每个表的每一行都有一些动态创建的复选框。 这是我在 jsp 中编写的代码：

<%
List<division> gd = (List<division>)request.getAttribute("gd");     
%>
<table style="float:left">
<tr><th>Divisions</th></tr>
<%
if(gd!=null && gd.size()>0){
    for(division di:gd){
%>
<tr>
<td><input type="checkbox" name="p_div" value="<%=di.getDiv() %>"  onchange="func1()">
  <center><%=di.getDiv() %></center></td>
</tr>
<%
   }
}
%>
</table>
<%
List<roll> gr = (List<roll>)request.getAttribute("gr");     
%>
<table style="float:right" id="tab2">
<tr><th>Roll Nos.</th></tr>
<%
if(gr!=null && gr.size()>0){
    for(roll di1:gr){
%>
<tr>
<td><input type="checkbox" name="p_roll" value="<%=di1.getRoll() %>" onchange="this.form.submit()" disabled>
  <center><%=di1.getRoll() %></center></td>
</tr>
<%
   }
}
%>
</table>

如果他/她不选中左侧表格的任何复选框，则用户无法选中右侧表格的任何复选框。 我想用纯 JavaScript 来解决这个问题。 最近几天我正在尝试这段代码。 请帮忙
我试过下面的代码：

function func1(){
    document.getElementById('tab2').getElementByTagName('input').disabled = false;
}

但仍然无法正常工作

Answer 1

您可以使用document.querySelectorAll('[name=p_div]:checked').length检查选中复选框的长度，如果长度> 0 ，则在下一个表中禁用/启用输入。

演示代码：

 function func1() { var flag = true; //checked chekcboxes length.. if (document.querySelectorAll('[name=p_div]:checked').length > 0) { flag = false; } //loop through other input in next table document.querySelectorAll('[name=p_roll]').forEach(function(el) { el.disabled = flag; //enabled /disabled.. }); console.log("Total checked.." + document.querySelectorAll('[name=p_div]:checked').length) }

 <table style="float:left"> <tr> <th>Divisions</th> </tr> <tr> <td><input type="checkbox" name="p_div" value="Abc" onchange="func1()"> <center> Abc </center> </td> </tr> <tr> <td><input type="checkbox" name="p_div" value="Abc2" onchange="func1()"> <center> Abc2 </center> </td> </tr> </table> <table style="float:right" id="tab2"> <tr> <th>Roll Nos.</th> </tr> <tr> <td><input type="checkbox" name="p_roll" value="1" onchange="this.form.submit()" disabled> <center> 1 </center> </td> </tr> <tr> <td><input type="checkbox" name="p_roll" value="2" onchange="this.form.submit()" disabled> <center> 2 </center> </td> </tr> </table>

Answer 2

对于旧版浏览器

要么使用

[...document.querySelectorAll('[name=p_roll]')] 

允许 forEach 或使用正常的 for 循环

也委托

 window.addEventListener("load", function() { document.getElementById("tab1").addEventListener("click", function(e) { var tgt = e.target; if (tgt.name==="p_div") { var flag = document.querySelectorAll('[name=p_div]:checked').length === 0; console.log(flag) //loop through other input in next table var pRoll = document.querySelectorAll('[name=p_roll]') for (var i = 0; i < pRoll.length; i++) { pRoll[i].disabled = flag; //enabled /disabled.. } console.log("Total checked..", document.querySelectorAll('[name=p_div]:checked').length) } }) })

 <table id="tab1" style="float:left"> <tr> <th>Divisions</th> </tr> <tr> <td><input type="checkbox" name="p_div" value="Abc"> <center> Abc </center> </td> </tr> <tr> <td><input type="checkbox" name="p_div" value="Abc2"> <center> Abc2 </center> </td> </tr> </table> <table style="float:right" id="tab2"> <tr> <th>Roll Nos.</th> </tr> <tr> <td><input type="checkbox" name="p_roll" value="1" onchange="this.form.submit()" disabled> <center> 1 </center> </td> </tr> <tr> <td><input type="checkbox" name="p_roll" value="2" onchange="this.form.submit()" disabled> <center> 2 </center> </td> </tr> </table>