如果第一个表中至少有一个复选框未选中，则第二个表中的任何复选框都不能使用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 OR使用正常的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>