使用 Jquery 根据复选框 ID 检查、取消选中 table 每一行中的复选框

Question

我正在尝试检查，取消选中基于 id 的复选框。我在 table.

中有两列

    *current  paper * arrear paper

如果当前有一篇论文 selected，那篇论文应该从欠费论文中禁用如果 select 在拖欠栏中编辑了该特定论文，则应从当前论文中禁用该论文。

我的问题是我可以禁用 拖欠论文 如果该特定论文在当前列中 selected，但是如果我取消选中 select 在当前列中编辑纸张，它不会在拖欠列中启用该纸张。同样的问题也出现在 SelectAll 复选框功能中如果我在 P1 论文中单击 SelectAll，我想在 P1 Arrear Paper Column

中禁用该列

任何人都可以指导我克服这个问题。提前致谢

我的 FIDDLE : Demo Here

片段：

$('input[type="checkbox"]').change(function() {
  $('input:checkbox:checked').each(function() {
    var el = $(this).parents('tr')[0];
    if ($(this).is(":checked")) {
      var dis = 'A-' + $(this).attr("id");
      var value = $(this).closest('tr').find('#' + dis);
      value.prop('disabled', true);
    }
  })
});
$('input[type="checkbox"]').change(function() {
  $('input:checkbox:checked').each(function() {
    //  var el = $(this).parents('tr')[0];
    if ($(this).is(":not(:checked)")) {
      var dis = 'A-' + $(this).attr("id");
      var value = $(this).closest('tr').find('#' + dis);
      value.prop('disabled', false);
    }
  })
});

function SelectAll(obj) {
  // find the index of column
  var table = $(obj).closest('table');
  var th_s = table.find('th');
  var current_th = $(obj).closest('th');
  var columnIndex = th_s.index(current_th) - 1;

  console.log('The Column is = ' + columnIndex);

  // select all checkboxes from the same column index
  table.find('td:nth-child(' + (columnIndex) + ') input').prop("checked", obj.checked).change();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table style="width:100%;" id="mytable" border="1">
  <tr>
    <th style="padding:2.5px;" colspan="3" style="text-align:center;">Current Paper</th>
    <th style="padding:2.5px;" colspan="3">Arrear Paper</th>
  </tr>
  <tr>
    <th>P1<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
    <th>P2 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
    <th>P3 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
    <th>P1<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
    <th>P2 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
    <th>P3<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P2" class="sum" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P3" class="sum" data-exval="1" data-toggle="checkbox"></td>
    <td><input class="selectableType" type="checkbox" id=A-P1></td>
    <td><input class="selectableType" type="checkbox" id=A-P2></td>
    <td><input class="selectableType" type="checkbox" id=A-P3></td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P2" class="sum" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P3" class="sum" data-exval="1" data-toggle="checkbox"></td>
    <td><input class="selectableType" type="checkbox" id=A-P1></td>
    <td><input class="selectableType" type="checkbox" id=A-P2></td>
    <td><input class="selectableType" type="checkbox" id=A-P3></td>
  </tr>
</table>

基本要求：如果学生select当前列中的一篇特定论文必须从拖欠列中禁用该特定论文，连续会有两篇相同的论文，一次只能 select 编辑一篇。

Answer 1

我对你的 html 做了一点修改，我推迟了 onclick 动作，而是使用 id，我使用每个复选框的索引，

因此主复选框的索引从 0 到 5，

复选框的第一行索引从 6 到 11，

最后一行从 12 到 17。

我在一个数组中设置了不同的值，并捕获了被单击的复选框的索引：

let sel = $('input[type="checkbox"]');
let ar = [];
for (let i = 0; i < 6; i++) {
  //if you want to add new line of checkbox ar.push([i + 6, i + 12, i + 18]);
  ar.push([i + 6, i + 12]);
}
//[[6, 12], [7, 13], [8, 14], [9, 15], [10, 16], [11, 17]]
// index for checkbox 0 is 6,12 and so on   
//console.log("checkbox", ar);

sel.change(function() {
  let lastcheckbox = sel.index($(this));
  let ischecked = sel.eq(lastcheckbox).is(":checked");
  //sel.prop("disabled", false);

  if (lastcheckbox < 6) { //main checkbox clicked
    let alt = lastcheckbox < 3 ? lastcheckbox + 3 : lastcheckbox - 3;
    ar[lastcheckbox].forEach( (item, i) => sel.eq(item).prop("checked", ischecked));

    sel.eq(alt).prop("disabled", ischecked);
    ar[alt].forEach( (item, i) => sel.eq(item).prop("disabled", ischecked));    

return;
  }

  //so its a secondary checkbox clicked
  ar.forEach((item, idx) => {
    if (item.includes(lastcheckbox)) {//find the main index of secondary checkbox
      let index = item.indexOf(lastcheckbox);
      let alt = idx < 3 ? idx + 3 : idx - 3;
      let one = item.some((idx) => sel.eq(idx).is(":checked"));
      let both = item.every((idx) => sel.eq(idx).is(":checked"));
      if (both) { //both secondary checkbox checked
        sel.eq(idx).prop("checked", true);
        sel.eq(alt).prop("disabled", true);
        ar[alt].map((i) => sel.eq(i).prop("disabled", true));
      } else if (!one && !both) { //no secondary checkbox checked
        sel.eq(idx).prop("checked", false);
        sel.eq(alt).prop("disabled", false);
        ar[alt].map((i) => sel.eq(i).prop("disabled", false));
      } else if (one && !both) {
        sel.eq(idx).prop("checked", false);
        sel.eq(alt).prop("disabled", true);
        sel.eq(lastcheckbox).prop("checked", ischecked);
        sel.eq(ar[alt][index]).prop("disabled", ischecked);
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<table style="width:100%;" id="mytable" border="1">
  <tr>
    <th style="padding:2.5px;" colspan="3" style="text-align:center;">Current Paper</th>
    <th style="padding:2.5px;" colspan="3">Arrear Paper</th>

  </tr>
  <tr>
    <th>P1<br /> <input type="checkbox" id="selectAll" /></th>
    <th>P2 <br /><input type="checkbox" id="selectAll" /></th>
    <th>P3 <br /><input type="checkbox" id="selectAll" /></th>
    <th>P1<br /> <input type="checkbox" id="selectAll" /></th>
    <th>P2 <br /><input type="checkbox" id="selectAll" /></th>
    <th>P3<br /> <input type="checkbox" id="selectAll" /></th>
  </tr>
  <tr>


    <td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P2" class="sum" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P3" class="sum" data-exval="1" data-toggle="checkbox"></td>




    <td><input class="selectableType" type="checkbox" id=A-P1></td>
    <td><input class="selectableType" type="checkbox" id=A-P2></td>
    <td><input class="selectableType" type="checkbox" id=A-P3></td>

  </tr>
  <tr>


    <td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P2" class="sum" data-exval="1" data-toggle="checkbox"></td>
    <td><input type="checkbox" name="checkbox" id="P3" class="sum" data-exval="1" data-toggle="checkbox"></td>




    <td><input class="selectableType" type="checkbox" id=A-P1></td>
    <td><input class="selectableType" type="checkbox" id=A-P2></td>
    <td><input class="selectableType" type="checkbox" id=A-P3></td>

  </tr>
</table>

Answer 2

您有很多相似的复选框 ID，正如您所提到的，由于某种原因您不想更改它们，因此我们可以通过避免复选框上的 for 循环和更改复选框上的调用函数来做到这一点。

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<table style="width:100%;" id="mytable" border="1">
<tr>
 <th style="padding:2.5px;" colspan="3" style="text-align:center;">Current Paper</th>
        <th style="padding:2.5px;" colspan="3">Arrear Paper</th>
     
       </tr>
       <tr>
          <th>P1<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
     <th>P2 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)"/></th>
      <th>P3 <br/><input type="checkbox" id="selectAll"onclick="SelectAll(this)" /></th>
       <th>P1<br/> <input type="checkbox" id="selectAll" onclick="SelectAll(this)" /></th>
     <th>P2 <br/><input type="checkbox" id="selectAll" onclick="SelectAll(this)"/></th>
      <th>P3<br/> <input type="checkbox" id="selectAll"onclick="SelectAll(this)" /></th>
    </tr>
  <tr >
    
    
      <td><input type="checkbox" name="checkbox" id="P1" class="sum" data-type="CurrentPaper" value="550" data-exval="1" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input type="checkbox" name="checkbox" id="P2" class="sum" 
data-exval="1" data-type="CurrentPaper" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input type="checkbox" name="checkbox" id="P3" class="sum" 
data-exval="1" data-type="CurrentPaper" data-toggle="checkbox" onclick="checkuncheck(this);"></td>



    
     <td><input class="selectableType" type="checkbox" id="A-P1" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
    <td><input class="selectableType" type="checkbox" id="A-P2" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
    <td><input class="selectableType" type="checkbox" id="A-P3" onclick="checkuncheck(this);" data-type="ArrearPaper"></td>
      
    </tr>
        <tr >
    
    
      <td><input type="checkbox" name="checkbox" id="P1" class="sum" value="550" data-type="CurrentPaper" data-exval="1" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input type="checkbox" name="checkbox" id="P2" class="sum" 
data-exval="1" data-type="CurrentPaper" data-toggle="checkbox" onclick="checkuncheck(this);"></td>
<td><input type="checkbox" name="checkbox" id="P3" class="sum" 
data-exval="1" data-type="CurrentPaper" data-toggle="checkbox" onclick="checkuncheck(this);"></td>



    
     <td><input class="selectableType" type="checkbox" id="A-P1" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
    <td><input class="selectableType" type="checkbox" id="A-P2" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
    <td><input class="selectableType" type="checkbox" id="A-P3" onclick="checkuncheck(this);" data-type="ArrearPaper" ></td>
      
    </tr>
    </table>
    
    function checkuncheck(element){
 var dis = $(element).attr("id"); 
 if($(element).attr("data-type").toLowerCase()=="currentpaper"){
            dis='A-'+$(element).attr("id");

 }
 else{
 dis= dis.split("-")[1];
 } 
        var el = $(element).parents('tr')[0];
        
      if($(element).is(":checked")){      
           var value= $(element).closest('tr').find('#'+dis);
     value.prop('disabled', true);
       }
     else
     {
           $(element).closest('tr').find('#'+dis)
             .prop('disabled', false);
     }
}

您可以在此 fiddle 中找到代码： https://jsfiddle.net/472s8cvb/

根据变化，尝试实现select所有功能

使用 Jquery 根据复选框 ID 检查、取消选中 table 每一行中的复选框

Check, unckeck checkbox in each row of table based on Checkbox ID using Jquery

html

javascript

checkbox

jquery

html-table