javascript - 当用户特别选择一项时，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

要实现此目的，您可以输入 id在第一个复选框上，以及另一个复选框上的公共(public)类，以便更轻松地选择它们。然后，当第一个复选框更改时，您可以按类别启用/禁用其他复选框。

另请注意 for您的 <label> 上的属性元素不正确。它应该包含 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>