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

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

デモ

デモページ

サンプルソース

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;
		}
	});
});