*

-jQuery-チェックをつけないとボタンが押せなくする方法

公開日: : css3, html5, jquery

今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。
00001

例えば、申込みフォームなどに同意にチェックをつけないと次に進めないという事などに使用したりしております。
まずは、デモを設置しましたので、見てください。
demo

このようにチェックをつけないとリンクを踏めないように設定してあります。

設置の方法もとても簡単です。
早速以下にソースを記載致します。

scriptは、
index.html
の中に記載いたします。(とても短いので・・)

index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>jQuery-チェックをつけないとボタンが押せなくする方法</title>
		<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>  
<div id="wrapper">

<div class="sample01"><label><input type="checkbox">同意する(同意するにチェックがついていないと下のボタンはクリックできません。)</label></div>
<div class="sample02">
<a href="#"><input type="image" src="images/button.png" alt=""></a>
</div>

</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
		   //送信ボタンの無効、チェックボックスを外す
			$(".sample02 input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
			$(".sample01 input:checkbox").attr('checked',false);
		   //チェックボックスがクリックされると送信ボタン有効
			$(".sample01 label,.sample01 input").click(function(){
				if($(".sample01 input:checkbox").is(':checked')){
					$(".sample02 input").css({opacity:"1",cursor:"pointer"}).removeAttr("disabled");
				}else{
					 $(".sample02 input").css({opacity:"0.5",cursor:"default"}).attr("disabled","disabed");
			}
		})
});
</script>

</body>
</html>

今回は、スタイルシートは、レイアウトのみになりますので、記載をいたしません。

以上で完成になります。
今回もとても簡単です。

お疲れ様でした。

まとめ

今回は、script箇所がとても短いので、htmlに書きましたが、別にしたいという方は、
以下に部分がscript箇所になります。

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

今回参考にしたサイトがありますのでこちらも参考にしてみてください。
チェック(同意)しないとボタンが有効になりません CodingMania

今回デモで使用したファイルをUPしときましたので、
よかったら参考にしてみてください。
download

今回の記事がもし参考になりましたら、ブログランキングにご協力ください。
よろしくお願いします。


関連記事

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

no image

背景に画像をフルスクリーンさせる方法。 maximageを使用。

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

記事を読む

no image

テキストの縦位置を設定する。line-height:を使用する。

今回は、テキストの間隔について書きたいと思います。 テキストを書くときテキストの縦位置が気にな

記事を読む

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

no image

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

no image

カスタマイズができるスライドショーを設置する方法。diapoを使用。

今回は、スライドショーを設置してみました。 ホームページにスライドショーを設置するのは、当たり

記事を読む

no image

ボタンを押すとコンテンツが現れる方法。スライドパネル。

今回は、ボタンを押すとコンテンツが現れる方法を調べてみました。 ボタン押すと下にコンテンツが現

記事を読む

no image

簡単popupの設置方法。Pop Easyを設置してみました。

今回は、ポップアップ(popup)の設置に取り組んでみました。   ポップアッ

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

Message

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

PAGE TOP ↑