[JavaScript] チェックボックスとボタンのdisabledを連動させる方法

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

ユースケース

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

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

仕様

• チェックボックスは 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;