中途半端を極める

web関連で役に立ちそうなものを紹介いたします

javascript

【javascript】チェックボックスをチェックしないとサブミットできないボタン

投稿日:

個人的には結構使用する動作なので紹介いたします。
プライバシーポリシーや20歳以上の確認を行うときなどに有効ですね。
残念ながらフォームのスパム対策としてはおそらく効果は無いと思われます。

step1:javascript読み込みます

<script type="text/javascript" src="jqueryまでのパス/jquery.js"></script>
<script type="text/javascript">// <![CDATA[
$(function() {
	$("form").submit(function() {
		var checkbox_val = $("input:checked[name^=private]").val();  //nameを合わせる(*1)
		if (checkbox_val) {
			return true;
		} else {
			//$("#priv_error").slideDown();
			alert("チェックボックスにチェックを入れてください。");
			return false;
		}
	});
});
// ]]></script>

step2:HTMLの記述を以下のようにします

<form action="next." method="post"><!-- nameを合わせます。(*1) -->
<input id="private" type="checkbox" name="private" />チェック入れたらサブミットできます。
<input id="submit" onmouseover="this.src='./images/bt_on.gif'" onmouseout="this.src='./images/bt.gif'" type="image" alt="" height="60" name="submit" src="./images/bt.gif" width="200" />
</form>

inputのnameとjavascriptのソース内のname要素を合わせなければ動作しません。

参考サイト
http://www.omnioo.com/record/javascriptjquery/check_and_submit/

-javascript

執筆者:


comment

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

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

関連記事

【javascript】複数の画像をウィンドウ幅に合わせてカルーセル風に実装(bxslider編)

ウィンドウ幅いっぱいにスライドを表示させたい。 そう思ってもなかなか思うような動作をするjavascriptを見つけるのが困難です。 見つけたとしても、それがレスポンシブに対応するのか否か。 そんなこ …

【javascript】西暦を自動的に更新されるようにjavascriptで表示する

今回は西暦を自動的に更新されるようにできるjavascriptをメモしておきます。 ・現在の西暦を自動的に取得する方法。 ・最終更新日の西暦を取得する方法。 2パターンあります。 コピーライトの部分と …

HTMLで生年月日から自動で年齢を読み込む方法

HTMLで年齢を表示させる場合、毎年手動で更新している人が多いかもしれません。自分もその中の一人でした。 実際毎年手動で更新するのは面倒くさいし、数が多いと忘れてしまう場合があります。 そんなことにな …

[javascript]複数の要素の高さを揃えるjavascript利用時にうまく動作しない時の対処法

「EqualHeight」や「flatheights」など複数の要素の高さを揃えるjavascriptを使用すると、SafariとGoogle Chromeではうまく動作しない場合があります。 うまく …

[javascript]レスポンシブデザインのWEBに使用できる!現在のウィンドウサイズの取得と判定をして処理を変更する方法

レスポンシブ対応のときウィンドウ幅でjavascriptの動きを変更したいと思ったことはないでしょうか。今回jQueryを用いてウィンドウ幅に合わせて処理を変更する方法を見つけましたので紹介いたします …