【jQuery】チェックボックスを押さないとボタンを押せないようにする方法とは？

　サイトを制作していく際に、サイト閲覧者に利用規約を読ませて
「利用規約を承認した上で申し込まれますか？」
のようなチェックボックスを用意して、チェックボックスを押した上で申し込みボタンを押してもらうようしたい…という場面が出てくることがあります。

この時に、チェックボックスを押さないと申し込みボタンを押せないようにする…という風にした方が、誤って申し込みボタンを押す…ということがなくなるので、できるだけこのような設定をしておいた方がよいと思います。

なので今回はjQueryを使った、チェックボタンを押さないとボタンを押せないようにする方法をご紹介したいと思います！

デモはこちら

　今回は以下のデモのようなものを設置するとします。

上のデモでは、チェックボックスを押さないとボタンが押せないようになっており、チェックボックスを押してない状態だとボタンを少し透過させています。

この状態でチェックボックスを押すとボタンの透過が解除され、ボタンが押せるようになる…という仕組みになっています。

設置するjQueryのコード

　それでは実際に設置するjQueryのコードをいくつかセクションにわけて解説したいと思います！

まず、設置するjQueryは以下になります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script>
$(function(){
	$('input:submit').css({opacity:'0.6',cursor:'default'}).attr('disabled','disabed');
	$('input:checkbox').attr('checked',false);
	$('label,input:checkbox').click(function(){
		if($('input:checkbox').is(':checked')){
			$('input:submit').css({opacity:'1',cursor:'pointer'}).removeAttr('disabled');
		} else {
			$('input:submit').css({opacity:'0.6',cursor:'default'}).attr('disabled','disabed');
		}
	})
});
</script>

チェックボックスを押さないとボタンを押せないよう設定

　まず上の見本コードの4～5行目で、デフォルトではボタンは押せない状態にしており、チェックボックスを押すことでようやくボタンが押せるよう設定しています。

なおかつ今回はチェックボックスを押してない状態の時にはボタンを透過させておくよう4行目で設定してあります。

チェックボックスが押された時の設定

　続いて、チェックボックスが押された時の設定を6～8行目で記述しています。

今回はチェックボックスが押された時にボタンの透過を解除し、なおかつボタンにカーソルを合わせた時にカーソルのデザインが変わるようにしました。

チェックボックスのチェックが外された時の設定

　続いて、9～10行目でチェックボックスのチェックが外された時の設定をしています。

この9～10行目の記述をしておかないと、チェックボックスのチェックが外されてもボタンが押せる状態のままになってしまうので、ここは必ず記述しておきましょう！

まとめ

　以上でチェックボックスを押さないとボタンが押せないよう設定する方法の解説を終わりにしたいと思います。

この方法は申し込みページを作った際に結構必要になる技術だったりするので、是非とも覚えておきましょう！