【jQuery】チェックしたら有効になる！お問い合わせフォームでよく使う「同意する」ボタンの作り方

こんにちは、ゆうや（@yuyaphotograph）です！

この記事では、

お問い合わせフォームの送信ボタンを初期状態では無効化し、「個人情報の取り扱いに同意する」や「プライバシーポリシーに同意する」にチェックしたら有効にする仕様を実装したいけど分からなくて困っている

という方のお悩みを解決します！

完成イメージを画像で確認
同意するボタンをコーディングする
まとめ

完成イメージを画像で確認

この記事で紹介するコードをコピペすると、添付画像のような動きのボタンを実装することができます。

以下「同意するボタン」と呼びます。

▼▼▼
チェックしたら、、、
▼▼▼

同意するボタンをコーディングする

サンプルコード

See the Pen
同意js by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

同意するボタンHTML

<div class="Form-CheckItem">
  <label class="Form-CheckItem-Label">
    <input type="checkbox" name="" value="" id="JS_CheckItem" class="Form-CheckItem-Label-Input">
    <span class="Form-CheckItem-Label-CheckIcon"></span>
    <span class="Form-CheckItem-Label-SquareIcon"></span>
    <span class="Form-CheckItem-Label-Text">○○○○に同意する</span>
  </label>
</div>
<input type="submit" class="Form-Btn JS_FormSubmit" value="送信する">

CSS

同意するボタンCSS

.Form-CheckItem {
  margin-top: 24px;
}
@media screen and (max-width: 480px) {
  .Form-CheckItem {
    margin-top: 18px;
  }
}
.Form-CheckItem-Label {
  margin-top: 20px;
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.Form-CheckItem-Label-Input {
  display: none;
}
.Form-CheckItem-Label-SquareIcon {
  border: 1px solid #ddd;
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  background: #eaedf2;
}
@media screen and (max-width: 480px) {
  .Form-CheckItem-Label-SquareIcon {
    width: 15px;
    height: 15px;
  }
}
.Form-CheckItem-Label-Text {
  padding-left: 8px;
  font-size: 24px;
}
@media screen and (max-width: 480px) {
  .Form-CheckItem-Label-Text {
    padding-left: 6px;
    font-size: 3.6vw;
  }
}
.Form-Btn {
  border-radius: 6px;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 280px;
  display: block;
  letter-spacing: 0.05em;
  background: #5bc8ac;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  opacity: 0.2;
  pointer-events: none;
  transition: all 0.2s;
}
@media screen and (max-width: 480px) {
  .Form-Btn {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
  }
}
.Form-Btn.isActive {
  opacity: 1;
  pointer-events: inherit;
}
.Form-CheckItem-Label-Input:checked + *:before {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  background: #5bc8ac;
  transform-origin: bottom left;
  transform: rotateZ(90deg);
}
.Form-CheckItem-Label-Input:checked + *:after {
  content: "";
  display: block;
  width: 8px;
  height: 2px;
  background: #5bc8ac;
  transform-origin: bottom left;
  transform: rotateZ(0deg);
}
.Form-CheckItem-Label-Input:checked + * {
  width: 0;
  height: 0;
  transform: translate(8px, 8px) rotateZ(-135deg) scale(1.5);
}
@media screen and (max-width: 480px) {
  .Form-CheckItem-Label-Input:checked + * {
    transform: translate(5px, 7px) rotateZ(-135deg) scale(1.5);
  }
}

jQuery

同意するボタンjQuery

$(function(){
  $('.Form-CheckItem-Label').on('click', function(){
    if ($('#JS_CheckItem').prop("checked") == true) {
      $('.JS_FormSubmit').addClass('isActive');
    } else {
      $('.JS_FormSubmit').removeClass('isActive');
    }
  });
});

まとめ

以上、チェックされたら送信できるようにする同意ボタンをHTML、CSS、jQueryで実装する方法を紹介しました。

「お問い合わせフォームのコーディングについてもっと知りたい！」

という方は以下の記事も目を通してみてください〜

【コピペ】超絶シンプルな！お問い合わせフォームのHTML、CSSサンプルコード