JS・jQuery

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

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

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

まず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%になります。
フォーム実装の際に試してみてね!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)