*

-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

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

no image

jqueryを使って画像を回転させる。jQueryRotateを使用

今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑