HTML jQuery フォームで全てのセレクトボックスが選択されているか確認し、全て選択されている時のみ送信したい。

Question

HTML jQuery 全てのセレクトボックスが選択されているか確認して同意ボタンを有効化したい

HTMLで

複数（何個でも）のセレクトボックス
同意チェックボックスと
送信ボタン

構成のフォームを作っています。

セレクトボックスが全て選択されていたら
同意のチェックボックスにチェックができ
送信ボタンも有効化されるような実装をしたいと思っているのですが。
セレクトの判定がうまくできません。
どなたかご教授していただけないでしょうか？

よろしくお願いいたします。

該当のソースコード

<form name="form" id="form" method="post">

    <div>
        <label>設問1</label>
        <select id="form1" class="select" name="option_01">
            <option value="" disabled selected>選択してください</option>
            <option value="1">YES</option>
            <option value="2">NO</option>
        </select>
    </div>

    <div>
        <label>設問2</label>
        <select id="form2" class="select" name="option_02">
            <option value="" disabled selected>選択してください</option>
            <option value="1">YES</option>
            <option value="2">NO</option>
        </select>
    </div>
    
      <div>
          <input type="checkbox" id="agree" value="1" class="disabled">
          <label for="agree">同意する</label>
      </div>
    <a class="disabled" id="join_button">送信</a>
  </form>

    $('#agree').change(function(){

        if ($('#agree').prop('checked')) {
            $('#join_button').removeClass('disabled');
        } else {
            $('#join_button').addClass('disabled');
        }
    });


    $('#agree').change(function(){
        $('select').each(function(){
            if($(this).val() === ''){
                $('#agree').prop('disabled', true);
            }else{
                $('#agree').prop('disabled', false);
            }
        });
    });

Answer 1

以下のような値

• すべてのセレクトボックスにおいて、選択してください以外の option が選ばれているならば true
• どれかひとつでも、選択してくださいのままのものがあれば false

となるような変数 ok を得るには

const ok = $('select').get().every(({ value }) => value);  

とすればよいです。

???? 参考： 上記のok を使った、サンプル (※確認のためセレクトボックスを4個にしています）

Answer 2

いろいろやり方はあると思いますが、自分ならこうするというものを書いておきます。

<div>
  <label>設問1</label>
  <select id="form1" class="select" name="option_01">
    <option value="" disabled selected>選択してください</option>
    <option value="1">YES</option>
    <option value="2">NO</option>
  </select>
</div>

<div>
  <label>設問2</label>
  <select id="form2" class="select" name="option_02">
    <option value="" disabled selected>選択してください</option>
    <option value="1">YES</option>
    <option value="2">NO</option>
  </select>
</div>

<div>
  <input type="checkbox" id="agree" value="1" disabled>
  <label for="agree">同意する</label>
</div>

<button id="join_button" disabled>送信</button>

<script>
const form1 = document.querySelector("#form1");
const form2 = document.querySelector("#form2");
const agree = document.querySelector("#agree");
const joinButton = document.querySelector("#join_button");

window.addEventListener("App.Form.changed", (event) => {
  let isFormValid = true;

  isFormValid = isFormValid && form1.selectedOptions.item(0).value !== "";
  isFormValid = isFormValid && form2.selectedOptions.item(0).value !== "";

  agree.disabled = !isFormValid;

  joinButton.disabled = !isFormValid;
});

form1.addEventListener("change", (event) => {
  window.dispatchEvent(new CustomEvent("App.Form.changed"));
});

form2.addEventListener("change", (event) => {
  window.dispatchEvent(new CustomEvent("App.Form.changed"));
});
</script>

追記

jQueryに置き換えたものが以下になります。

<div>
  <label>設問1</label>
  <select id="form1" class="select" name="option_01">
    <option value="" disabled selected>選択してください</option>
    <option value="1">YES</option>
    <option value="2">NO</option>
  </select>
</div>

<div>
  <label>設問2</label>
  <select id="form2" class="select" name="option_02">
    <option value="" disabled selected>選択してください</option>
    <option value="1">YES</option>
    <option value="2">NO</option>
  </select>
</div>

<div>
  <input type="checkbox" id="agree" value="1" disabled>
  <label for="agree">同意する</label>
</div>

<button id="join_button" disabled>送信</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>
const $window = $(window);
const $form1 = $("#form1");
const $form2 = $("#form2");
const $agree = $("#agree");
const $joinButton = $("#join_button");

$window.on("App.Form.changed", (event) => {
  let isFormValid = true;

  isFormValid = isFormValid && $form1.find("option:selected").val() !== "";
  isFormValid = isFormValid && $form2.find("option:selected").val() !== "";

  $agree.attr("disabled", !isFormValid);

  $joinButton.attr("disabled", !isFormValid);
});

$form1.on("change", (event) => {
  $window.trigger("App.Form.changed");
});

$form2.on("change", (event) => {
  $window.trigger("App.Form.changed");
});
</script>

Comments

[daichanman]

回答ありがとうございます。
希望の動きになっていました。

すみませんJavaScriptあまり読めずJQでのソースなど
教えていただくことは可能でしょうか？

また冗長ではなくループなど使う方法もありましたら参考までに教えていただけたら助かります。

[KAOsaka]

回答追記しました。jQueryでは同一セレクタの要素をまとめて操作できてしまうので、行数を減らしたいのであればkilesaさんの回答も参考にすると良いと思います。