JavaScript | 同意するチェックと送信ボタンの無効化・有効化サンプル
JavaScriptでフォームにある利用規約に「同意する」チェックボックスのボタンとチェックしたら送信フォームを無効化から有効化に切り替える良くあるコンテンツのサンプルコードです。
同意するチェックと送信ボタンの無効化・有効化
同意するチェックと送信ボタンの無効化・有効化の切り替えを実装した動作サンプルとサンプルコードになります。
See the Pen CSS | focus-within by yochans (@yochans) on CodePen.
HTMLには、同意ボタンと送信ボタンの最小限のフォーム要素を配置しています。
送信ボタンは初期値でdisabledを指定しておき、同意ボタンにチェックが入るまで無効化します。
<div class="container">
<form>
<p><input type="checkbox" id="consent-chk" name="consent-chk">
<label for="consent-chk">同意する</label>
</p>
<p><input type="submit" value="送信" disabled></p>
</form>
</div>HTML要素のセレクタによる取得はquerySelectorを使っています。
querySelectorAllでもgetElementsByClassNameでもgetElementByIdでも。
「同意する」のチェックボックスの要素にイベントを追加、チェックされていれば送信ボタンの「disabled」を解除、チェックが外れていればONにします。
// 同意するのチェックボックス
const consent_chk = document.querySelector(`#consent-chk`);
// 送信ボタン
const submit_btn = document.querySelector(`input[type=submit]`);
// チェックボックスの入力イベント
consent_chk.addEventListener('change', () => {
// チェックボックスがあれば無効化をオフ、なければオン
if (consent_chk.checked === true) {
submit_btn.disabled = false;
} else {
submit_btn.disabled = true;
}
});※disabledはfalseが無効化しない状態で、trueが無効化している状態になります。