input type=checkboxで特定の組み合わせの場合にチェックが付けられないようにしたい

Question

□ りんご
□ みかん
□ ぶどう
□ かき

上記のようなチェックボックスで、例えば、りんごとみかんの組み合わせはNGにしたい場合、どのような実装が考えられますでしょうか？

自分で考えたことは、チェックが付いてる要素を配列に入れて、その中にりんごとみかんが含まれていればNGにする、みたいな方法を考えたのですが、この実装で躓いてしまいました。

$('input.check').change(function() {
    var arr = [];
    $('input.check:checked').each(function(){
        arr.push($(this).val());
    });
    //console.log(arr);
})

これでチェックされた値を配列にしたのですが、この中からりんごとみかんという複数の要素を検索する方法が分かりませんでした。

もしくはもっとスマートな方法があったらお知恵を拝借したいです。

Comments

[yambejp]

排他処理の場合
・片方を選ぶともう片方が選べなくなる
・片方が選ばれている状態でもう片方を選ぶと、元のチェックが外れる（ラジオボタン的）
のどちらを想定していますか？

[haribou]

ありがとうございます。

>・片方を選ぶともう片方が選べなくなる

上記動作を想定しておりました。

Answer 1

排他処理用にグルーピングをする属性が必要です。
以下サンプルではカスタムデータで処理していますが、場合によってはクラスなどでもよいでしょう

片方を選ぶともう片方が選べなくなる

<script>
document.addEventListener('change',e=>{
  const t=e.target;
  if(t.matches('[type=checkbox][data-unique]')){
    document.querySelectorAll(`[data-unique="${t.dataset['unique']}"]`).forEach(x=>{
      if(x!==t) x.disabled=t.checked;
    });
  }
});

</script>

<label><input type="checkbox" data-unique="1">りんご</label>
<label><input type="checkbox" data-unique="1">みかん</label>
<label><input type="checkbox" data-unique="2">てすと1</label>
<label><input type="checkbox" data-unique="2">てすと2</label>
<label><input type="checkbox" data-unique="2">てすと3</label>
<label><input type="checkbox">ぶどう</label>
<label><input type="checkbox">かき</label>

片方が選ばれている状態でもう片方を選ぶと、元のチェックが外れる（ラジオボタン的）

<script>
document.addEventListener('change',e=>{
  const t=e.target;
  if(t.matches('[type=checkbox][data-unique]')){
    document.querySelectorAll(`[data-unique="${t.dataset['unique']}"]`).forEach(x=>{
      if(x!==t) x.checked=false;
    });
  }
});
</script>
<label><input type="checkbox" data-unique="1">りんご</label>
<label><input type="checkbox" data-unique="1">みかん</label>
<label><input type="checkbox" data-unique="2">てすと1</label>
<label><input type="checkbox" data-unique="2">てすと2</label>
<label><input type="checkbox" data-unique="2">てすと3</label>
<label><input type="checkbox">ぶどう</label>
<label><input type="checkbox">かき</label>

Comments

[haribou]

排他処理という考えが浮かびませんでした。おかげで思い通りの実装ができそうです。
ありがとうございました！