JavaScriptでフォーム 連動と制限

Question

フォームで選択肢を連動させて選択の制限をしたいです。

選択リストA　選択肢：1、2、3
選択リストB　選択肢：4、5、6

★選択リストAが1の時、選択リストBは4、5しか選択できない
★選択リストAが2の時、選択リストBは5、6しか選択できない

汚いのですが、下記の記述でローカルでは動くことを確認したのですが、
サーバーにあげるとうまく動作しません。（エラーメッセージは出ませんでした）
記述方法がよくないのでしょうか。
inputの指定はidかclassでやりたいです。
またjQueryで書きましたが、JavaScriptに変更できたりしますでしょうか。

わがままを言って申し訳ないのですが、よろしくお願いいたします。

  <form action="" class="form">
      
    <h3 for="name">選択リストA</h3>

    <div class="form_list">
      <label for="">1<input type="checkbox" name="food01" value="1" id="food01"/></label>
      <label for="">2<input type="checkbox" name="food02" value="2" id="food02"></label>
      <label for="">3<input type="checkbox" name="food03" value="3" id="food03"></label>
    </div>

    <h3 for="name">選択リストB</h3>
    <div class="form_list">
      <label for="">4<input type="checkbox" name="food04" value="4" id="food04"/></label>
      <label for="">5<input type="checkbox" name="food05" value="5" id="food05"></label>
      <label for="">6<input type="checkbox" name="food06" value="6" id="food06"></label>
    </div>

    <input type="button" id="" value="送信">

  </form>

    $(function(){
  checkedButton();
  
  $('#food01,#food02').change(function(){
      checkedButton();
  });
  
  function checkedButton(){
      if($('#food01').prop('checked')){
          $('#food04').prop('disabled', true);
      }else{
          $('#food04').prop('disabled', false);
      };

      if($('#food02').prop('checked')){
          $('#food05').prop('disabled', true);
      }else{
          $('#food05').prop('disabled', false);
      };
  }
  
});

Comments

[nae_stage]

javascriptはhtmlとは別ファイルでしょうか？
もしそうなら、
ブラウザの開発者ツールなどで確認した際、当該ファイルは読み込まれていますでしょうか？

[pellx]

ご連絡ありがとうございます。
はい、ファイルは読み込まれているのを確認いたしました。
回答に書かせていただいたのですが、少し変更したら動くようになりました。

Answer 1

<script>
document.addEventListener('change',e=>{
  const t=e.target;
  if(t.matches('[data-disable]')){
    const dis=[...document.querySelectorAll('[data-disable]:checked')].map(x=>x.dataset.disable);
    [...document.querySelectorAll('.target')].forEach(x=>x.disabled=dis.includes(x.value));
  }
});
window.addEventListener('DOMContentLoaded', ()=>{
});
</script>
<form>
<h3>選択リストA</h3>
<div class="form_list">
<label>1<input type="checkbox" name="food01" value="1" data-disable="6"></label>
<label>2<input type="checkbox" name="food02" value="2" data-disable="4"></label>
<label>3<input type="checkbox" name="food03" value="3"></label>
</div>
<h3>選択リストB</h3>
<div class="form_list">
<label>4<input type="checkbox" name="food04" value="4" class="target"></label>
<label>5<input type="checkbox" name="food05" value="5" class="target"></label>
<label>6<input type="checkbox" name="food06" value="6" class="target"></label>
</div>
<input type="submit" value="送信">
</form>

Comments

[pellx]

ありがとうございました！参考にいたします。

Answer 2

idを記述をまとめていたのを分けたら何故か動くようになりました。

   $(function(){
  checkedButton();
  
  $('#food01).change(function(){
      checkedButton();
  });
  
  function checkedButton(){
      if($('#food01').prop('checked')){
          $('#food04').prop('disabled', true);
      }else{
          $('#food04').prop('disabled', false);
      };
  }
});

   $(function(){
  checkedButton();
  
  $('#food02).change(function(){
      checkedButton();
  });
  
  function checkedButton(){
      if($('#food02').prop('checked')){
          $('#food03').prop('disabled', true);
      }else{
          $('#food03').prop('disabled', false);
      };
  }
});