TutorialMeta
Ad

Disable All The Checkbox In The Same Column Of A Table Without The Checked One Jquery

- 1 answer

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.

Ad

Answer

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>

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad