最初のチェックボックスをオンにして残りのチェックボックスをすべて無効にする場合

Question

別のラベルの中に4つのチェックボックスがあります。

最初のチェックボックスをオンにすると、残りのチェックボックスはすべて無効になります。 最初にをクリックすると、すべてのチェックボックスが有効になります。 他のチェックボックスをオンにしても、他のチェックボックスは有効なままです。複数のチェックボックスを選択できます。 See image here

どうすれば設定できますか？

Answer 1

はこれを試してみてください：

HTML：

<label for="one"><input type="checkbox" name="one" id="one"></label> 
<label for="two"><input type="checkbox" name="two" id="two"></label> 
<label for="three"><input type="checkbox" name="three" id="three"></label> 
<label for="four"><input type="checkbox" name="four" id="four"></label> 

のjQuery：

$('input[type="checkbox"]').on('change', function() { 
    if($('input[type="checkbox"]').eq(0).is(':checked')){ 
     $('input[type="checkbox"]').not($(this)).attr('disabled', true); 
    } 
    else{ 
     $('input[type="checkbox"]').not($(this)).attr('disabled', false); 
    } 
}); 

の作業例：https://jsfiddle.net/e26vnnk2/

Answer 2

他のすべての「チェックボックス」を無効にする方法を知りたい場合は、ラジオグループを使用してください。最初のチェックボックスが他のチェックボックスのトグルを自動的にトリガーすると言っている場合は、グループ化や依存関係に問題があるかのように聞こえるので、グループを解除するか、