*

-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

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

-jQuery-メールアドレス入力確認付メールフォーム

今回は、jQueryを使ってメールフォーム(メールアドレス入力確認付)を作成してみました。

記事を読む

no image

-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法

今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

jqueryを使って画像を拡大・縮小させる。

今回は、画像を拡大・縮小させるという事をやってみました。 前回は、画像を回転させるという事をや

記事を読む

no image

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

今回は、自動で画像を切り替える方法について調べてみました。 (フェイドイン・フェイドアウトのみ)

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑