WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： プログラム >JavaScript

みなさんはお問い合わせフォームの入力画面で、こんな表示を見たことはありませんか？

これは、【「個人情報の取り扱いについて」に同意する】にチェックを打たないと、ボタンが活性化されずその先に進めない状態になっています。
チェックを入れてもらうことで、非活性の状態から切り替わるようにJavaScriptで制御しています。
お問い合わせフォームでは、エラーの制御やこのような個人情報の取り扱いへの同意チェックをした上でボタンクリックができるようにするといった仕様のもと制作をすることもあります。
では今回は、チェックボックスの状態によってボタンを活性・非活性の状態にする方法について解説していきます。

同意ボタンの活性・非活性デモ

See the Pen
同意ボタンの活性化 by saki kurita (@saki_0415)
on CodePen.

【「個人情報の取り扱いについて」に同意する】をクリックすると、チェックボックスにチェックが入り、【内容を確認する】ボタンが活性化され青色のボタンに変わります。
再び【「個人情報取り扱いについて」に同意する】をクリックをすると非活性になり、グレーアウトしたボタンに戻ります。

それでは順番に実装した動きについて解説をしていきます。

HTML

まずはHTMLからです。「個人情報の取り扱いについて」に同意するのチェックボックスエリアを用意します。
さらにその下にボタンエリアを用意しましょう。ボタンはお問い合わせフォームなのでtype=”submit”で制作しましょう。
そしてポイントは、buttonタグに【disabled=”disabled”】を予めつけておくことです。disabled属性は指定した要素を無効化します。これでボタンがクリックできない状態にしておきます。

<div class="policy">
	<input type="checkbox" id="chkbox" name="policy_doui" value="1">
	<label for="chkbox">「個人情報の取り扱いについて」に同意する</label>
</div>
<div class="submit_btnarea">
	<button type="submit" value="内容を確認する" class="form_btn" id="submit" disabled="disabled">内容を確認する</button>
</div>

CSS

続いてCSSです。ボタンの見た目を整えていきます。通常のボタンデザインでは青いボタンで、disabledにより無効化されているときはグレーアウトしているボタンデザインにしておきましょう。

.policy{
	margin: 20px auto;
  text-align:center;
}
.submit_btnarea {
	width: 360px;
	margin: 0 auto;
}
.form_btn{
	background: #005183;
	border: 1px solid #fff;
	color: #fff;
	width: 100%;
	padding: 10px;
	font-size: 16px;
	cursor: pointer;
	transition: all .5s ease-out;
	position: relative;
}

.form_btn:hover{
	border: 1px solid #005183;
	background: #fff;
	color: #005183;
}
button[type="submit"][disabled] {
			background-color: #fff;
			color: #ccc;
			border-color: #ccc;
			cursor: default;
		}
	
	button[type="submit"][disabled]:hover{
		opacity:1;
	}

JavaScript

最後はJavaScriptです。ここで、同意するにチェックが入ったらボタンが有効化される動きを実装していきます。

	$(function() {
		$('#submit').attr('disabled', 'disabled'); //①
			$('#chkbox').click(function() { //②
			if ( $(this).prop('checked') == false ) {　//③
				$('#submit').attr('disabled', 'disabled');　//④
			} else {
				$('#submit').removeAttr('disabled');　//⑤
			}
		});
	});

まず、JavaScript内に記述されているメソッドについて確認していきましょう。

• 「attr()」メソッドは、HTML要素の属性を取得したり設定することができるメソッド
• 「prop()」メソッドは、input関連の値を取得する場合に使用するメソッド

どちらも取得するという点では同じですが、使いどころが異なります。
attr()は、指定した要素の記述があるか（取得されているか）を確認する
prop()は、指定した要素の状態（例：チェックされたかどうか）を確認する
と、なるので今回のJavaScriptでは下記の手順でボタン制御をしています。

1. 【#submit】要素にdisabledがあるか取得
2. チェックボックス【#chkbox】がクリックされたら
3. チェックボックスにチェックが入っているか状態確認
4. チェックが入っていなかったら、【#submit】要素にdisabledをつける
5. チェックが入っていたら、【#submit】要素からdisabledを外す

これでチェックボックスによる切り替えで、ボタンの活性化・非活性化が機能するようになりました。

まとめ

今回は【attr()】メソッドと【prop()】メソッドによる使い分けで、ボタンの動きを制御する方法について紹介しました。このような状態取得は色々な場面で使えますので、ぜひ活用してみてください。