在没有选中一个 jquery 的情况下禁用表的同一列中的所有复选框

Question

您好，我有一个动态生成的表，其中我有几个带有复选框的列。当我选中一个复选框时，我想要什么，同一列中的所有复选框都将被禁用，但不是这个，如果我取消选中所有复选框复选框将再次启用，反之亦然，此操作对于该特定列中的每个复选框都是相同的。

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>

只对普通复选框做，而不是对表格列中的复选框做

表格代码如下

<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>

和禁用复选框代码是，但它没有帮助

 $(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','');
  }
 });

我希望仅对 Sample 列复选框执行此操作。我添加了表生成 sn-p 感谢您的帮助。

Answer 1

为列示例中的所有复选框分配一个类，并在单击事件时禁用该类的所有复选框，当前复选框除外。.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>

更新： 根据您的评论添加了新代码。这里我们禁用当前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>