If at least one checkbox of the first table is not checked then any checkbox of the second table can not be checked using JavaScript

Question

I have two tables, each with some dynamically created checkbox in each row. Here is my code which I write in 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>

Here user can not check any checkbox of right side table if he/she doesn't check any checkbox of the left side table. I want to solve this problem using pure JavaScript. I am trying this code for last couple of days. Please help
I have tried the below code:

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

But still not working

Answer 1

You can use document.querySelectorAll('[name=p_div]:checked').length to checked the length of checked checkboxes and if length is > 0 disable/enable inputs in your next table.

Demo Code :

 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

For older browsers

Either use

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

to allow the forEach OR use a normal for loop

Also delegate

 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>