[JavaScript] チェックボックスとボタンのdisabledを連動させる方法
1 min read
チェックボックス(複数)のチェック状態を見て、サブミットボタンを有効・無効化させる。
ユースケース
以下のようなケースでユーザにチェックボックスをチェックさせた上でボタンを押させたい。
- 規約同意のチェックボックス
- サービス退会時の確認項目のチェックボックス
仕様
- チェックボックスは 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;