チェックボックス(複数)のチェック状態を見て、サブミットボタンを有効・無効化させる。

ユースケース

以下のようなケースでユーザにチェックボックスをチェックさせた上でボタンを押させたい。

  • 規約同意のチェックボックス
  • サービス退会時の確認項目のチェックボックス

仕様

  • チェックボックスは1つ〜複数
  • チェックボックスが1つでもチェックされていない場合、ボタンはdisabled(初期状態)

方法

<input type="checkbox" class="js-required-check" id="inlineCheckbox1">
<button type="button" disabled class="js-btn-submit">Submit</button>
let checkboxies = document.querySelectorAll(".js-required-check");
let submitButton = document.querySelector(".js-btn-submit");

Array.from(checkboxies, el => {
  el.addEventListener("change", function() {
    if (getCheckedBoxLength() === checkboxies.length) {
      submitButton.removeAttribute("disabled");
    } else {
      submitButton.setAttribute("disabled", "disabled");
    }
  });
});

const getCheckedBoxLength = () => document.querySelectorAll(".js-required-check:checked").length;