jQuery:チェックされたら送信可能にするボタンをjQueryで制御する
週末にwebサイトの機能追加の依頼が入り、 メールフォームに利用規約の同意ボタンを実装しました。
自分用メモとしてHTML、jQuery、cssのソースをまとめておきます。誰かの参考になれば幸いです!
チェックされたら送信可能にするボタンをjQueryで制御する
動作としてはこんな感じ
最初にページが表示されたときは、送信ボタンが押せない状態になってる
↓ ↓ ↓
"「利用規約」に同意します"にチェックが入ったら、
送信ボタンを押せるようにする
デモも作ってみたので実際に触って確認してみてください。
demo
条件分岐:チェックボックスに…
- チェックが入っている → 送信ボタンが押せる
- チェックが入っていない → 送信ボタンが押せない
HTML
<!-- チェックボックス -->
<input id="checkBtn" type="checkbox"><label for="check">「<a href="#">利用規約</a>」に同意します</label>
<!-- 送信ボタン -->
<input id="submitBtn" type="submit" value="submit" disabled>
送信ボタン「value="submit"」
submitの記述を変えると、送信ボタンに表示されている文言が変わります
送信ボタン「disable」
送信ボタンが押せないように制御しています
jQuery
$(function() {
$('#checkBtn').on('change', function(){
if ($(this).is(':checked')) {
//チェックが入ったら、送信ボタンを押せる
$('#submitBtn').prop('disabled', false);
} else {
//チェックが入っていなかったら、送信ボタンを押せない
$('#submitBtn').prop('disabled', true);
}
});
});
CSS
/* 送信ボタン */
input[type="submit"] {
padding: 10px 20px;
border: none;
background: #9FD6D2;
color: #fff;
}
/* 送信ボタン - マウスオーバー時 */
input[type="submit"]:hover {
background: #54A9BD;
}
/* 送信ボタン - 押せないとき */
input[type="submit"][disabled] {
background-color: #ccc;
cursor: default;
}
jQueryのことがよくわからない方へ
jQueryは事前に、プログラムを動かすためのソースを読み込んでおかないと動ごきません。
わからない人はとりあえず<head>部分に下のコードを記述しておいてください。
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
jQueryの記述自体はjsファイル内に記述するか、HTML側にエンベット(「<script></script>」の中にコードを書き込む方法)でOKです。
実際に運用しているページはこちら
千葉音声研究所という、音声処理専門家さんのwebサイトの『お問い合わせページ』です。
私はプログラミング初心者なので、簡単なjQueryからブログに載せていけたらいいなと思っています。
ブログ用に細かくコメントアウトを入れたので、私と同じような初心者さんの参考になると嬉しいです。