フォームのチェックボックスを入れないとボタンを押せないようにする方法

フォームでプライバシーポリシーとかたまにチェックを入れないと押せないようにする仕様がありますよね。
あれを今回作ります。
では早速書いていくー！

フォームのチェックボックスを入れないとボタンを押せないようにする方法

まずHTMLからチェックボックスのinputタグにIDをつけておきます。
今回は「#agree」とつけます。

jQueryはこちら。

function agree_check(){
	if($('#agree').length) {
		$('.contact-btn').addClass('no-act');
		$('#agree').change(function() {
			var val = $('#agree:checked').val();
			if(val == 'on') {
				$('.contact-btn').removeClass('no-act');
			}else{
				$('.contact-btn').addClass('no-act');
			}
		});
	}
}

「#agree」がある時のみ動くようにif文で書きました。
そして。押せないようにするボタンのID,classは「.contact-btn」としています。
自分で変更したい場合は書き換えてください。

今回は、チェックを入れないとclassをつけて、CSSで押せないようにします。
CSSはこちら。

.no-act{
pointer-events: none;
}

これは、クリックを無効化してくれるCSSです。
これだけだと、見た目上わかりにくいので、チェックを入れるまで半透明にしたりしてユーザーにわかりやすいようにしたほうが良いと思います。

例えばこんな感じ。

.no-act{
pointer-events: none;
opacty: 0.6;
}

これで色が60％になります。
フォーム実装の際に試してみてね！