禁用表的同一列中的所有复选框，而无需选中一个jQuery

Question

Hello I have a dynamic generated table where i have several columns with checkboxes .what i want when i check one check box, all the checkboxes in the same column will be disabled but not this one ,and again if i uncheck it all checkbox will enable again vice versa and this action will be same for every check box in that specific column.

 for(var i=1;i<=10;i++) { var row = "<tr class='active' style='font-size=10px;height:3px;'>" + "<td style='height:3px;' class='text-center'><input type='text' name='txtQuantity' class='form-control' /></td>" + "<td style='height:3px;' class='text-center'><input type='text' name='txtQuantity' class='form-control' /></td>" + "<td style='height:3px;' class='text-center'><input type='checkbox' value=''></td>" + "<td style='height:3px;' class='text-center'><input type='checkbox' value=''></td>" + "<td style='height:3px;' class='text-center'><input type='checkbox' id='sam' value=''></td>" + "</tr>"; $('#tblComponent tbody').append(row); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <table class="table table-responsive-lg header-fixed table-striped table-bordered table-condensed table-hover dataTable no-footer " id="tblComponent"> <thead class="" style="background-color: #B7472A; color: white;font-size: 13px; "> <tr> <th class="text-center">Id</th> <th class="text-center">Name</th> <th class="text-center">pass</th> <th class="text-center">fail</th> <th class="text-center">sample</th> </tr> </thead> <tbody style=""></tbody> </table> 

done only for normal checkboxs but not for those in table columns

the table code is like below

<table class="table table-responsive-lg header-fixed table-striped table-bordered table-condensed table-hover dataTable no-footer " id="tblComponent">
                            <thead class="" style="background-color: #B7472A; color: white;font-size: 13px; ">
                                <tr>
                                    <th class="text-center">Id</th>
                                    <th class="text-center">Name</th>
                                    <th class="text-center">pass</th>
                                    <th class="text-center">fail</th>
                                     <th class="text-center">sample</th>


                                </tr>
                            </thead>
                            <tbody style=""></tbody>
                        </table>

and disable checkbox code is ,but its not helping

 $(document).on("click","input[type=checkbox]",function(){
 if($(this).is(':checked')){
 $('input[type=checkbox]').attr('disabled',true);
  $(this).attr('disabled','');
  }
  else{
  $('input[type=checkbox]').attr('disabled','');
  }
 });

I want this to be done for Sample column checkboxes only.I added the table generation snippet Thanks for the help.

Answer 1

Assign a class to all the checkboxes in the column sample and on the click event, disable all the checkboxes with that class except the current one. .not(this) .

 for(var i=1;i<=10;i++) { var row = "<tr class='active' style='font-size=10px;height:3px;'>" + "<td style='height:3px;' class='text-center'><input type='text' name='txtQuantity' class='form-control' /></td>" + "<td style='height:3px;' class='text-center'><input type='text' name='txtQuantity' class='form-control' /></td>" + "<td style='height:3px;' class='text-center'><input type='checkbox' value=''></td>" + "<td style='height:3px;' class='text-center'><input type='checkbox' value=''></td>" + "<td style='height:3px;' class='text-center'><input type='checkbox' class='sample' value=''></td>" + "</tr>"; $('#tblComponent tbody').append(row); } $(document).on("click","input[class=sample]",function(){ if($(this).is(':checked')){ $('input[class=sample]').not(this).attr('disabled',true); } else{ $('input[class=sample]').attr('disabled',false); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <table class="table table-responsive-lg header-fixed table-striped table-bordered table-condensed table-hover dataTable no-footer " id="tblComponent"> <thead class="" style="background-color: #B7472A; color: white;font-size: 13px; "> <tr> <th class="text-center">Id</th> <th class="text-center">Name</th> <th class="text-center">pass</th> <th class="text-center">fail</th> <th class="text-center">sample</th> </tr> </thead> <tbody style=""></tbody> </table> 

UPDATE: Added new code according to your comment. Here we disable all the checkboxes in siblings of current tr .

 for(var i=1;i<=10;i++) { var row = "<tr class='active' style='font-size=10px;height:3px;'>" + "<td style='height:3px;' class='text-center'><input type='text' name='txtQuantity' class='form-control' /></td>" + "<td style='height:3px;' class='text-center'><input type='text' name='txtQuantity' class='form-control' /></td>" + "<td style='height:3px;' class='text-center'><input type='checkbox' value=''></td>" + "<td style='height:3px;' class='text-center'><input type='checkbox' value=''></td>" + "<td style='height:3px;' class='text-center'><input type='checkbox' class='sample' value=''></td>" + "</tr>"; $('#tblComponent tbody').append(row); } $(document).on("click","input[class=sample]",function(){ if($(this).is(':checked')) { $(this).closest('tr').siblings().find($('input[type=checkbox]')).attr('disabled',true); } else{ $('input[type=checkbox]').attr('disabled',false); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <table class="table table-responsive-lg header-fixed table-striped table-bordered table-condensed table-hover dataTable no-footer " id="tblComponent"> <thead class="" style="background-color: #B7472A; color: white;font-size: 13px; "> <tr> <th class="text-center">Id</th> <th class="text-center">Name</th> <th class="text-center">pass</th> <th class="text-center">fail</th> <th class="text-center">sample</th> </tr> </thead> <tbody style=""></tbody> </table>