JQUERY使禁用複選框項目時，用戶選擇特別

Question

一個項目，我想使所有其他選項設置爲禁用作爲NESSUNA用戶點擊：

HTML：

<input type="checkbox" value="NESSUNA" name="allergie2[]"> 
<label for="allergie2"> NESSUNA </label> 
<br> 
<input type="checkbox" value="cereali con glutine" name="allergie2[]"> 
<label for="allergie2"> Cereali con glutine </label> 
<br> 
<input type="checkbox" value="crostacei" name="allergie2[]"> 
<label for="allergie2">Crostacei </label> 
<br> 
<input type="checkbox" value="latte e lattosio" name="allergie2[]"> 
<label for="allergie2">Latte e lattosio </label> 
<br> 
<input type="checkbox" value="lupini" name="allergie2[]"> 
<label for="allergie2">Lupini </label> 

---

的JQuery部分（我試着第一個選項）：

$(function() { 
    enable_cb(); 
    $("input:checkbox[name='allergie2[]'][value='NESSUNA").click(enable_cb); 
}); 

    function enable_cb() { 
    if (this.checked) { 
     $("input:checkbox[name='allergie2[]'][value='cereali con glutine']").attr("disabled", true); 
    } else { 
     $("input:checkbox[name='allergie2[]'][value='cereali con glutine']").removeAttr("disabled"); 
    } 
} 

Answer 1

要達到這個目的，你可以把一個第一個複選框上的以及另一個上的常用類，以使它們更容易選擇。然後，當第一個checbox改變時，你可以通過他們的類來啓用/禁用其他的。

另請注意，<label>元素上的for屬性不正確。它應該保留相關複選框的id，而不是它的name。試試這個：

$('#nessuna').change(function() { 
 
    $('.checkbox').prop({ 
 
    checked: false, 
 
    disabled: this.checked 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" value="NESSUNA" name="allergie2[]" id="nessuna"> 
 
<label for="nessuna"> NESSUNA </label><br> 
 

 
<input type="checkbox" value="cereali con glutine" name="allergie2[]" class="checkbox" id="cereali"> 
 
<label for="cereali"> Cereali con glutine </label><br> 
 

 
<input type="checkbox" value="crostacei" name="allergie2[]" class="checkbox" id="crostacei"> 
 
<label for="crostacei">Crostacei </label><br> 
 

 
<input type="checkbox" value="latte e lattosio" name="allergie2[]" class="checkbox" id="latte"> 
 
<label for="latte">Latte e lattosio </label><br> 
 

 
<input type="checkbox" value="lupini" name="allergie2[]" class="checkbox" id="lupini"> 
 
<label for="lupini">Lupini </label>

Answer 2

添加class到checkbox：

<input type="checkbox" value="NESSUNA" name="allergie2[]"> 
<label for="allergie2"> NESSUNA </label> 
<br> 
<input type="checkbox" class="disable-others" value="cereali con glutine" name="allergie2[]"> 
<label for="allergie2"> Cereali con glutine </label> 
<br> 
<input type="checkbox" value="crostacei" name="allergie2[]"> 
<label for="allergie2">Crostacei </label> 
<br> 
<input type="checkbox" value="latte e lattosio" name="allergie2[]"> 
<label for="allergie2">Latte e lattosio </label> 
<br> 
<input type="checkbox" value="lupini" name="allergie2[]"> 
<label for="allergie2">Lupini </label> 

，並添加一個處理程序：

$(function() { 
    $(".disable-others").click(function() { 
     var current = $(this); 
     current.prop("checked") ? current.siblings("checkbox").attr("disabled", true) : current.siblings("checkbox").removeAttr("disabled"); 
    }); 
});