*

-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

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

テキストがアコーディオンのように開く。

今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた

記事を読む

no image

スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)

今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。

記事を読む

no image

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

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

記事を読む

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

no image

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

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

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑