我可以根據是否選中多個複選框來設置啓用或禁用複選框嗎？

所以我的複選框多行像下面我可以根據是否選中多個複選框來設置啓用或禁用複選框嗎？

我想要做的添加，編輯和同一行中刪除複選框圖片時，同一行中最左邊的複選框是被禁用使用jquery進行檢查，我嘗試使用這裏的解決方案solution，但這種解決方案只適用於1組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>

來源

2016-08-02 Idham Choudry

請注意，您可以使用類而不是'id01，id02，id03，...'。 –

@SpencerWieczorek如果我想使用css風格的服裝類，該怎麼辦？ –

@Wallflower然後它是一個選擇。 ID的意思是獨一無二的，所以沒有問題，如果你不重複ID的。 – Randy

你可以這樣做的一種方法是使用每一行。然後從那裏選擇第一個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); 
    }); 
});

Demo

來源

2016-08-02 08:02:04

感謝它的工作，你可以向我解釋什麼是''div：gt（0）input'' –

@Wallflower它意味着選擇'div'元素大於'0'的索引。換句話說，除了第一個輸入（*是左邊的複選框*），它將獲得div內的所有輸入。 –

我遇到了一些問題，如果複選框已經從頭開始檢查，其他複選框仍然沒有被禁用 –

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

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

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

通過所有與指定類的複選框，這樣就可以循環並可以留下一行的複選框與類易於分離。雖然你必須找到一種方法，但如何將其他複選框定位在同一行的右側。

來源

2016-08-02 07:50:51 Archit

問題是我會有很多類，如果我使用 –

這種單一的代碼行的伎倆，在一個變化的事件：

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

每當與0123的元素類（或它的一個子）改變......

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

獲取this（已更改的元素）的所有兄弟姐妹以下具有類col-sm-2 ...

.children('input') ...

獲取輸入元素是上述的孩子......

.prop('disabled', ...

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

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

獲取包含在與剛換了班col-sm-5股利輸入框...

.prop('checked') ...

查找出來，如果它檢查與否。所以，

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

計算結果爲真或假，而我們將其插入這樣的：

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

因此，如果第一個複選框被選中，接下來的三個被禁用，如果不是，他們不是。

來源

2016-08-02 08:25:59 BobRodes

我可以根據是否選中多個複選框來設置啓用或禁用複選框嗎？

回答

相關問題