【jQuery】チェックボックスにチェックを入れるとボタンが活性化する
- 2019.10.9
- jQuery


利用規約に同意(チェック)する!

申し込みボタンが活性化!
実装内容
- 同意する(利用規約とか申し込み規約とか)
- 複数のボタンが活性化される(応募ボタンとか申し込みボタンとか)
- 活性化前の申し込みボタンはグレーデザイン(押せないということがわかるように)
- Googleアナリティクスのオンクリックタグ(onclick)を入れたい
- チェックマークはブラウザ共通デザインで
- しっかりレスポンシブ対応
実装サンプル
▽jquery-1.11.3.min.js使用
See the Pen
【jQuery】チェックボックスのチェックを入れるとボタンが活性化する by 125naroom (@125naroom)
on CodePen.
HTMLとJavaScriptとCSSはこちら
HTML
<section> <div class="notes_required"> <div class="checkBtn_area"> <label for="checkBtn" class="checkBtn"><input id="checkBtn" type="checkbox"><span class="label_inner">同意する</span></label> </div> <p class="check_text_b">チェックを入れると「ボタン」が有効となります。</p> </div> <div class="btnArea"> <input type="submit" value=""> <a href="https://125naroom.com/web/3191" target="_blank" class="btn_one _a">ボタン</a> </div> <div class="btnArea"> <input type="submit" value=""> <a href="https://125naroom.com/web/3191" target="_blank" class="btn_one _b">ボタン</a> </div> </section>
JavaScript
//チェックが入ったら、ボタンを押せる $(function() { $(".label_inner").click(function(){ $(".notes_required").toggleClass("_check"); $(".btnArea").toggleClass("_check"); }); });
CSS
/*------------------------------------------------------------ .notes_required ------------------------------------------------------------*/ .notes_required { text-align: center; background: #fff; border: 2px solid #ffb97c; padding: 30px 20px; } .notes_required .check_text_b { font-size: 16px; } .notes_required .checkBtn_area { max-width: 400px; margin: 15px auto 10px; border-radius: 12px; background: #ffd6b3; padding: 20px 0; transition-duration: 0.2s; } .notes_required._check .checkBtn_area { background: #ffb97c; } .notes_required label { color: #333; font-size: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0); cursor: pointer; transition-duration: 0.3s; position: relative; } .notes_required label .label_inner { padding-left: 22px; } .notes_required label .label_inner:before { content: ""; width: 24px; height: 24px; background: #fff; border: 4px solid #737373; box-sizing: border-box; position: absolute; top: 50%; left: 0; margin-top: -13px; } .notes_required._check label .label_inner:after { content: ''; width: 20px; height: 12px; border-top: 6px solid #d6042e; border-right: 6px solid #d6042e; -webkit-transform: rotate(130deg); transform: rotate(130deg); position: absolute; top: 50%; left: 0; margin-top: -.9em; } .notes_required label input { position: relative; z-index: -1; } @media screen and (min-width: 768px) { .notes_required label:hover { border-bottom: 2px solid #ff7600; } } @media screen and (max-width: 1024px) { .notes_required label { font-size: 18px; } .notes_required .check_text_b { font-size: 14px; } .notes_required label .label_inner { padding-left: 10px; } .notes_required label .label_inner:before { width: 20px; height: 20px; margin-top: -10px; } .notes_required._check label .label_inner:after { width: 16px; height: 8px; margin-top: -0.8em; } } @media screen and (max-width: 767px) { .notes_required { padding: 20px 15px; } .notes_required .check_text_b { font-size: 13px; } .notes_required._check label .label_inner:after { width: 16px; height: 8px; margin-top: -0.8em; } } /*------------------------------------------------------------ .btnArea ------------------------------------------------------------*/ .btnArea { max-width: 400px; margin: 30px auto 0; position: relative; } .btnArea input[type="submit"] { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100%; border: none; border-radius: 0; background: rgba(255, 255, 255, 0); padding: 0; z-index: -1; transition-duration: 0.3s; box-sizing: border-box; -webkit-appearance: none; } .btnArea input[type="submit"] { cursor: default; z-index: +1; outline: none; } .btnArea._check input[type="submit"] { z-index: -1; } a.btn_one { display: flex; justify-content: center; align-items: center; background: #969696; border-radius: 12px; box-sizing: border-box; box-shadow: 0px 0px 0px 0px #00407b; width: 100%; height: 80px; padding: 0 10% 0 6%; color: #ffffff; font-size: 24px; font-weight: bold; text-align: left; text-decoration: none; position: relative; transition-duration: 0.2s; } a.btn_one:before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 12px; border-color: transparent transparent transparent #ffffff; position: absolute; top: 50%; right: 8%; margin-top: -11px; } ._check a.btn_one._a { background: #3475b1; box-shadow: 0px 5px 0px 0px #104575; } a.btn_one._a:hover { background: #228bc8; opacity: 1; } ._check a.btn_one._b { background: #459d3c; box-shadow: 0px 5px 0px 0px #255720; } a.btn_one._b:hover { background: #63b559; opacity: 1; } @media screen and (max-width: 1024px) { a.btn_one { height: 60px; font-size: 20px; } } @media screen and (max-width: 767px) { a.btn_one { font-size: 16px; } }
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに

CSSが複雑ですねー

しっかりレスポンシブって大変だー
おすすめ
かんれん
- web / 2020.1.8
- 【CSS】Flexboxの使い方と実装サンプル集
- web / 2018.8.30
- 【CSS】line-heightの単位は必要ない
- web / 2019.2.20
- 【CSS】IE11だけ表示崩れしたときのCSSハック
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.10.02New
- Aubloom オーブルーム – RAWSILK SHAMPOO ローシルクシャンプー
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.07.31
- 【Google Chrome】ショートカットキーまとめ(Windows or Mac)
- クロームでF5(更新)ってどうするんでしたっけ? あー、Macですか?わかるわかる、な…
- 125naroom / デザインするところ(会社)です。