お問い合わせフォームでは、よく「プライバシーポリシーに同意する」や「個人情報の取り扱いに同意する」などのチェックボックスが用意されていることがありますね。
こういったフォームでは、「同意する」にチェックが入っていれば送信ボタンを有効に、そうでなければ無効にするという機能がついています。
今回の記事では、この機能をJavaScriptで実装する方法を紹介していきます！
実装DEMOやコピペ用のコードも用意してしますので、ぜひ参考にしてみてください。
「同意する」チェックで送信ボタンを有効化するフォームの実装DEMO
以下に、チェックボックスと送信ボタンのみの簡単なフォームを用意しました。（実際には送信できません）
チェックをつけ外しして、ボタンの挙動を確かめてみてください。
チェックが外れている状態ではボタンをクリックできず、チェックされている時のみボタンが有効になっているのが確認できたかと思います。
次で実際の実装コードを紹介していきますね。
【コピペ用】「同意する」チェックで送信ボタンを有効化するフォームの実装コード
コピペ用のHTML・CSS・JavaScriptのコードを掲載しますので、自由にお使いください。
<form>
<div>
<input type="checkbox" id="agree" />
<label for="agree">同意する</label>
</div>
<button type="submit" class="submit-btn" id="submit-btn" disabled>送信する</button>
</form>フォームの中身は各自作成してください。
/* 送信ボタン */
.submit-btn {
/* buttonタグのリセットCSS */
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
appearance: none;
color: #fff;
padding: 8px 24px;
background-color: #3abec1;
cursor: pointer; /* ポインターカーソルを表示 */
}
.submit-btn[disabled] {
background-color: #ccc;
cursor: not-allowed; /* クリック不可のカーソルを表示 */
}CSSは、ボタンが有効のとき/無効のときの最低限のスタイルのみ紹介しています。
// 「同意する」のチェックボックスを取得
const agreeCheckbox = document.getElementById("agree");
// 送信ボタンを取得
const submitBtn = document.getElementById("submit-btn");
// チェックボックスをクリックした時
agreeCheckbox.addEventListener("click", () => {
// チェックされている場合
if (agreeCheckbox.checked === true) {
submitBtn.disabled = false; // disabledを外す
}
// チェックされていない場合
else {
submitBtn.disabled = true; // disabledを付与
}
});以上でコードの紹介は終わりです！
次で実装コードの解説をしていきますので、コードを理解したい方は読み進めてください。
「同意する」チェックで送信ボタンを有効化するフォームの実装コード解説
ここからは実装コードの解説を行います。
HTML・CSSの解説
メインはJavaScriptなので、HTMLとCSSは最低限の解説となります。
<form>
<div>
<input type="checkbox" id="agree" />
<label for="agree">同意する</label>
</div>
<button type="submit" class="submit-btn" id="submit-btn" disabled>送信する</button>
</form>HTMLはこちらをベースに、各自フォームに必要な項目を追加してください。
CSSは、ボタンにdisabledがついている（ボタンが無効）状態と、disabledが外れている（ボタンが有効）状態のスタイルを指定します。
/* 送信ボタン */
.submit-btn {
/* buttonタグのリセットCSS */
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
appearance: none;
/* ボタン有効時のスタイル */
color: #fff;
padding: 8px 24px;
background-color: #3abec1;
cursor: pointer; /* ポインターカーソルを表示 */
}
/* ボタン無効時のスタイル */
.submit-btn[disabled] {
background-color: #ccc;
cursor: not-allowed; /* クリック不可のカーソルを表示 */
}有効の場合はcursor: pointerを指定することで、ユーザーに「クリック可能な要素」と知らせることができます。
反対に、disabledがついていてボタンが無効の時は、not-allowedを指定することで「クリック不可」を知らせるカーソルを表示できます。
pointerとnot-allowedの見た目は、実装DEMOのボタンにカーソルを当てて確かめてください。
JavaScriptの解説
ここからはJavaScriptの解説をしていきます。
まずは全体のコードを確認してみましょう。
// 「同意する」のチェックボックス
const agreeCheckbox = document.getElementById("agree");
// 送信ボタン
const submitBtn = document.getElementById("submit-btn");
agreeCheckbox.addEventListener("click", () => {
// チェックされている場合
if (agreeCheckbox.checked === true) {
submitBtn.disabled = false; // disabledを外す
}
// チェックされていない場合
else {
submitBtn.disabled = true; // disabledを付与
}
});上から順番に解説していきます。
①チェックボックスと送信ボタンを取得
まずはチェックボックスと送信ボタンをJavaScriptで操作するために、getElementByIdで取得します。
const agreeCheckbox = document.getElementById("agree");
const submitBtn = document.getElementById("submit-btn");基本的にはページ内にフォームは1つだけなので、idを使用しましたが、querySelectorなどでクラス指定しても問題ありません。
②チェックボックスにクリックイベントを設定する
チェックボックスをクリックした時にボタンの状態を変更したいので、agreeCheckboxに対してクリックイベントを設定します。
agreeCheckbox.addEventListener("click", () => {
// ここにチェックボックスをクリックした時の処理を記述
});クリックした時の処理は次で説明していきます。
③チェック済みかどうかで送信ボタンにdisabled属性を付与/削除する
チェックボックスにチェックがついている時は、checkedという属性が付与されます。
このchecked属性の有無で送信ボタンのdisabled属性を付け外しするというif文を組みます。
agreeCheckbox.addEventListener("click", () => {
// チェックされている場合
if (agreeCheckbox.checked === true) {
submitBtn.disabled = false; // disabledを外す
}
// チェックされていない場合
else {
submitBtn.disabled = true; // disabledを付与
}
});checkedがついている場合は、送信ボタンのdisabledがfalseになり、ボタンが有効となります。
反対にcheckedがついていない場合は、送信ボタンにdisabledが付与され、ボタンが無効となります。
これでJavaScriptの解説は終わりです。
【まとめ】フォームの「同意する」チェックで送信ボタンを有効化する方法
「同意する」チェックで送信ボタンを有効化する機能をJavaScriptで実装する方法を紹介しました。
お問い合わせフォームを作成する際によく実装する機能なので、ぜひこの記事を参考にして作ってみてください。
コメント