チェックが入っていないと送信できないお問い合わせフォーム

個人情報保護方針の同意チェックなど、チェックしないと送信できない動きを実装する方法。

デモ

チェックボックスを入れないと送信できない送信フォーム

デモページ

サンプルソース

jQueryを使ってフォーム動作を制御する。

html
<form>
	<p><input type="checkbox" name="accept"> 同意する</p>
	<p><input type="submit" value="送信">
</form>
css
input[type="submit"] {
	width: 8em;
	height: 2em;
	background-color: rgb(102, 102, 102);
	color: #FFFFFF;
	border-style: none;
	cursor: pointer;
}
js
$(function() {
	/* 「同意する」チェックイベント */
	$('[type="checkbox"]').on('click', function(){
		if($('[type="checkbox"]').prop("checked")){
			$('[type="submit"]').css('background-color', 'rgb(51, 51, 255)');
		} else {
			$('[type="submit"]').css('background-color', 'rgb(102, 102, 102)');
		}
	});

	/* 「同意する」がチェックされていない場合submit=false */
	$('[type="submit"]').on('click', function(){
		if ($('[type="submit"]').css('background-color') == 'rgb(102, 102, 102)') {
			return false;
		}
	});
});

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください