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

Question

我有两个 table，每行中都有一些动态创建的复选框。这是我在 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>

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

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

但还是不行

Answer 1

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

演示代码 :

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>

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

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

javascript

jsp