我是否可以根據是否選中了多個復選框來將其設置為啟用或禁用狀態？

Question

所以我有多行復選框，如下圖所示

我想在使用jquery檢查同一行中最左邊的復選框時禁用同一行中的添加，編輯和刪除復選框，我嘗試在此解決方案中使用解決方案 ，但是該解決方案僅適用於一組checboxes，我要有很多復選框組，我更喜歡在這種情況下使用循環語句，但是我無法提出任何解決方案。

這是我的html代碼：

  <div class="row">
  <div class="col-sm-5"><input type="checkbox" name="aauth100" value="auth100" id="auth100" onclick ="togAuth1()">New Member + Kit Purchase</input></div>
  <div class="col-sm-2"><input type="checkbox" name="aaddAuth100" value="addAuth100" id="addAuth100">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="aeditAuth100" value="editAuth100" id="editAuth100">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="adelAuth100" value="delAuth100" id="delAuth100">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth101" value="auth101" id="auth101">New Member Registration</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth101" value="addAuth101" id="addAuth101">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth101" value="editAuth101" id="editAuth101">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth101" value="delAuth101" id="delAuth101">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth102" value="auth102" id="auth102">Member Data Maintenance</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth102" value="addAuth102" id="addAuth102">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth102" value="editAuth102" id="editAuth102">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth102" value="delAuth102" id="delAuth102">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth103" value="auth103" id="auth103">Member Registration Listing</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth103" value="addAuth103" id="addAuth103">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth103" value="editAuth103" id="editAuth103">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth103" value="delAuth103" id="delAuth103">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth104" value="auth104" id="auth104">Geneology Listing</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth104" value="addAuth104" id="addAuth104">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth104" value="editAuth104" id="editAuth104">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth104" value="delAuth104" id="delAuth104">Delete</input></div>
</div>
<div class="row">
  <div class="col-sm-5"><input type="checkbox" name="auth105" value="auth105" id="auth105">Member Rank Report</input></div>
  <div class="col-sm-2"><input type="checkbox" name="addAuth105" value="addAuth105" id="addAuth105">Add</input></div>
  <div class="col-sm-2"><input type="checkbox" name="editAuth105" value="editAuth105" id="editAuth105">Edit</input></div>
  <div class="col-sm-2"><input type="checkbox" name="delAuth105" value="delAuth105" id="delAuth105">Delete</input></div>
</div>

Answer 1

您可以將某些類別分配給您的復選框。 然后以這種方式使用jquery的.each（）方法。

$(".someclass").each(function(){

            if($(this).is(':checked'))
            {
               // Disable other checkbox in row
            }
            else
            {
                //don't disable checkbox
            }
        })

這將遍歷具有指定類別的所有復選框，您可以輕松地將左側行的復選框與類別分開。 盡管您將不得不找到一種方法，但是如何定位同一行右側的其他復選框。

Answer 2

一種方法是使用每一行。 然后從那里選擇第一個div並輸入它。 可以將其用於更改事件，然后可以禁用除第一個復選框之外的所有復選框：

$('.row').each(function(){
  var self = this;
  $(this).find('div:first input').change(function(){
     // disables all but the first input in the div rows
     if(this.checked) $(self).find('div:gt(0) input').attr("disabled", true);
     else $(self).find('div:gt(0) input').attr("disabled", false);
  });
});

演示版

Answer 3

在更改事件中，以下一行代碼可以解決問題：

$('.col-sm-5').on('change', function(){
    $(this).nextAll('.col-sm-2').children('input').prop('disabled',
         $(this).children('input').prop('checked'));
});

我將其分解：

$('.col-sm-5').on('change', ...

每當col-sm-5類的元素（或其子元素之一）改變時...

$(this).nextAll('.col-sm-2') ...

獲取this （更改的元素）的以下所有同級類，它們的類為col-sm-2 ...

.children('input') ...

獲取上述元素的輸入元素...

.prop('disabled', ... 

禁用的屬性將設置為true或false ...

$(this).children('input') ...

使用剛剛更改的類col-sm-5獲取div中包含的輸入框...

.prop('checked') ...

找出是否已檢查。 所以，

$(this).children('input').prop('checked')

計算結果為true或false，我們將其插入到此中：

.prop('disabled', [true or false])

因此，如果選中第一個復選框，則禁用后三個復選框，如果未選中，則不選中。