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

Question

I am trying to check, Uncheck checkbox based on id. I have two column in table.

    *current  paper * arrear paper

if one paper is selected in current that paper should be disabled from arrear paper and if is selected in arrear column that particular paper should be disabled from current paper.

My Problem is that i am able to disable the Arrear Paper if that specific paper is selected in current column, but if i uncheck that selected paper in current column, it does not enable that paper in arrear column. This same problem is in SelectAll Checkbox function also if i click SelectAll in P1 paper,Current Column i want to disable that column in P1 Arrear Paper Column

Can Anyone Please Guide Me to Overcome this issue. Thanks in Advance

MY FIDDLE : Demo Here

Snippet :

$('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>

Basic Requirement : if a student select one particular paper in Current column that Specific Paper must be disabled from arrear column, in a row there will be two same papers,only one shoulb be selected at a time.

Useless comment: The word "paper" appeared over 12 times in the question but only twice in the code! — Wimanicesir
– Wimanicesir, Commented May 6, 2021 at 8:21
@Frenchy In my original code this html table is inside the loop and have multiple rows. — kala
– kala, Commented May 6, 2021 at 8:26

Frenchy · Accepted Answer · 2021-05-06 13:42:27Z

I have done a little modification in your html, i have put off the onclick action and instead to use id, i use the index of each checkbox,

so main checkbox are indexed from 0 to 5,

the first line of checkbox are indexed from 6 to 11,

and the last line from 12 to 17.

I set the different values in an array and i trap the index of checkbox clicked:

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>

Thank You so much Sir.Let me Check this with my code and Update
You have used ar.push([i + 6, i + 12]); so it will work only for two rows ? (i.e Upto 12 index)
and what is the problem? if you want to add row, you have to adapt the program, its really easy.. do you want to add row?

meenakshi · Accepted Answer · 2021-05-06 12:47:09Z

You have lots of similar checkbox ids and as you have mentioned you didn't want to change them due to some reason, so the way we can do it by avoiding for loop on checkbox and calling function on checkbox change.

        <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);
     }
}

you can find the code in this fiddle: https://jsfiddle.net/472s8cvb/

Based on the changes, try to implement select all functionlity

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related