webデザイン初心者|sometimes study

webデザイン初心者の私が一人前になるまでの記録。webデザイン(Illustrator・Photoshop)・webサイト制作(HTML・CSS・JavaScript・jQuery・PHP・WordPress)を中心にお勉強中。

jQuery:チェックされたら送信可能にするボタンをjQueryで制御する

週末にwebサイトの機能追加の依頼が入り、 メールフォームに利用規約の同意ボタンを実装しました。 

 

自分用メモとしてHTML、jQuerycssのソースをまとめておきます。誰かの参考になれば幸いです!

 

f:id:serinaishii:20151013141327p:plain


チェックされたら送信可能にするボタンを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サイトの『お問い合わせページ』です。

 

f:id:serinaishii:20151019151636p:plain

 

www.chiba-onsei-lab.com

 

私はプログラミング初心者なので、簡単なjQueryからブログに載せていけたらいいなと思っています。

 

ブログ用に細かくコメントアウトを入れたので、私と同じような初心者さんの参考になると嬉しいです。