他のチェックボックスの選択に基づいてチェックボックスの選択を制限します

Question

4つのチェックボックス（すべて、金曜日、土曜日、日曜日）があり、ユーザーが選択できる範囲を制限したいと思います。金曜日と日曜日の組み合わせはすべて選択できません。

例1. すべてが は金曜日、土曜日、日曜日は、例2

をチェックすることが許可されていませんがチェックされ 金曜日と日曜日はすべて、以下の

をチェックすることを許可されていない をチェックされますJSコードが動作していますが、次のJSを記述するためのより良い/より速い/よりエレガントな方法があるかどうか疑問に思っていました。

Select Days:<br> 

<label><input type="checkbox" name="consultantDays" value="All">All</label> 

<br> 

<label><input type="checkbox" name="consultantDays" value="Friday">Friday</label> 

<br> 

<label><input type="checkbox" name="consultantDays" value="Saturday">Saturday</label> 

<br> 

<label><input type="checkbox" name="consultantDays" value="Sunday">Sunday</label> 

JS

<script> 
    /* Only allow All or (Friday, Saturday, Sunday) */ 
    $("input[name='consultantDays'").on('change', function() { 
     if ($(this).val() == 'All') { 
      $("input[name='consultantDays'").not(this).prop('checked', false); 
     } else { 
      $("input[value='All'").not(this).prop('checked', false); 
     } 
    }); 
</script> 

Answer 1

あなたのコードは完璧に働いているが、あなたは属性セレクタのクロージングブラケットを逃しました。

$("input[name='consultantDays']").not(this).prop('checked', false); 
          ^
} else { 
$("input[value='All']").not(this).prop('checked', false); 
        ^

/* Only allow All or (Friday, Saturday, Sunday) */ 
 
$("input[name='consultantDays'").on('change', function() { 
 
    if ($(this).val() == 'All') { 
 
    $("input[name='consultantDays']").not(this).prop('checked', false); 
 
    } else { 
 
    $("input[value='All']").not(this).prop('checked', false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Select Days:<br> 
 

 
<label><input type="checkbox" name="consultantDays" value="All">All</label> 
 

 
<br> 
 

 
<label><input type="checkbox" name="consultantDays" value="Friday">Friday</label> 
 

 
<br> 
 

 
<label><input type="checkbox" name="consultantDays" value="Saturday">Saturday</label> 
 

 
<br> 
 

 
<label><input type="checkbox" name="consultantDays" value="Sunday">Sunday</label>