CodingMania

CodingMania

2011/4/24

formの同意確認をチェックしないとボタンが有効になりません。

jqueryでinputチェックボックスのチェックが入ると、disabedを操作して送信ボタンが有効になるようにしています。

チェックが外れると、送信ボタンが無効になります。
内容確認しないと進めないというフォームに使えるのではないでしょうか？
ヘッダーで、jquery.jsと後述のcheck.jsを読み込んでいます。
2014/01/21改訂。

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/check.js"></script>

[check.js]JavaScript

$(function(){
		   //送信ボタンの無効、チェックボックスを外す
			$(".mod_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
			$(".mod_form_importance_btn input:checkbox").attr('checked',false);
		   //チェックボックスがクリックされると送信ボタン有効
			$(".mod_form_importance_btn label,.mod_form_importance_btn input").click(function(){
				if($(".mod_form_importance_btn input:checkbox").is(':checked')){
					$(".mod_form_btn input").css({opacity:"1",cursor:"pointer"}).removeAttr("disabled");
				}else{
					 $(".mod_form_btn input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
			}
		})
});

HTMl

<form action="">
<div class="mod_form_importance_btn">
<p class="check">
<label for="privacy"><input type="checkbox" id="privacy" name="privacy" value="同意する" />&nbsp;同意する</label>
</p>
<!-- mod_form_importance_btn_end --></div>

<div class="mod_form_btn">
<p><input type="image" src="img/send.gif" alt="確認する" onMouseOver="this.src='img/send_on.gif';" onMouseOut="this.src='img/send.gif'"></p>
<!-- mod_form_btn_end --></div>
</form>

© CodingMania.net