【jQuery】チェックしたら送信可能になるボタンの実装方法【コピペOK】

チェックボタンにチェックを入れたら、送信ボタンが押せるようになるように実装する方法です。

完成のイメージはこんな感じ。

「利用規約に同意する」にチェックを入れると、送信ボタンが押せるようになります。

よく見る仕様ですよね。

チェックボックスと送信ボタンのCSSは初期化し、オリジナルのCSSをあてています。

フォームのCSSを初期化したデザインで、チェックしたら送信可能になるボタンを実装している記事が見当たらなかったので、まとめていきます。

フォームのCSSを初期化する理由は、以下のように、ブラウザによってそれぞれデザインが大きく変わってくるからです。

この記事を書いている私（わや@wayasblog）は、Web制作会社でマークアップエンジニアとして働いています。

入社後すぐに「チェックしたら送信可能になるボタンの実装」をすることがあり、今後も使うと思うので、備忘録として残しておきます。

クリックできる目次

チェックしたら送信可能になるボタンの実装方法
1. CSSの解説
2. jQueryの解説
【まとめ】チェックしたら送信可能になるボタンの実装方法
最後に宣伝

チェックしたら送信可能になるボタンの実装方法

さっそくCodePenでコードを見ていきましょう！

See the Pen dyGyzvP by わや@ブログ/プログラミング挑戦中 (@wayasblog) on CodePen.

コピペすれば動きますが、それぞれ解説していきますね。

HTMLは特別なことはないので、

CSS
jQuery

について見ていきます。

CSSの解説

チェックボックスと送信ボタンはCSSを初期化して、オリジナルのデザインをあてています。

これは最初にも説明しましたが、ブラウザ間の差異をなくすためです。

フォームの初期化に関しては、はにわまんさんの以下に記事が大変参考になります。

フォームのCSSを初期化してオリジナルなデザインを再現しよう！ | HPcode（えいちぴーこーど）

フォームの各要素はブラウザによって基本となるデザインが異なります。デフォルトの状態のフォームをChromeとFirefoxで比較してみました。 ChromeFirefox 分かりにくいですが、文言や大きさや色、アイコンなどほぼ異なっていま

チェックボタンのCSSはこちら↓

.check {
  display: none;
}

.check + span {
  cursor: pointer;
  display: inline-block;
  margin: 0 0.2em 0;
  padding: 0 0 0 2em;
  position: relative;
}

.check + span::before {
  -webkit-transform: translateY(-50%);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 2px;
  content: "";
  display: block;
  height: 1.3em;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.3em;
}

.check + span::after {
  -webkit-transform: translateY(-50%) rotate(-45deg);
  border-bottom: 3px solid rgba(0, 0, 0, 0.8);
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  content: "";
  display: block;
  height: 0.6em;
  left: 1%;
  margin-top: -0.2em;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  transition: all 0.3s ease 0s;
  width: 1em;
}

.check:checked + span::after {
  opacity: 1;
}

既存のチェックボックスを「display: none;」にして、独自のチェックボックスを擬似要素で作っています。

送信ボタンのCSSはこちら↓

.submit {
  -webkit-appearance: none;
  background-color: rgba(0, 0, 0, 0.8);
  background-image: none;
  border: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  margin: 0 0 1em;
  padding: 0.6em 2em;
  text-decoration: none;
}

.submit:hover,
.submit:focus {
  outline: none;
}

.submit::-moz-foucus-inner {
  border: none;
  padding: 0;
}

最後に、「:disabled」という擬似クラスを使って、無効状態になっている時は押すことができず、opacityも効くようになっています。

.submit:disabled {
  cursor: default;
  opacity: 0.5;
}

jQueryの解説

今回はjQueryを使っているので、読み込むのを忘れないようにしてください。

まずは、送信ボタンにdisabledプロパティを設定し、押せないようにしておきます。

// 送信ボタンにdisabledプロパティを設定
$('.submit').prop('disabled', true);

次に、チェックボックスのクリックイベントを作成。

$('#check').click(function() {

if文の中ではpropメソッドを使い、もしthis（ここでは#check）にチェックが入っていなければ、送信ボタンにdisabledプロパティを設定し、ボタンを押せないようにします。

// チェックボックスにcheckedプロパティが入っていなければ
if ( $(this).prop('checked') == false ) {
   // 送信ボタンにdisabledプロパティを設定
   $('.submit').prop('disabled', true);

反対に、チェックが入っていれば、送信ボタンのdisabledプロパティを外し、ボタンを押せるようにします。

   } else {
      // 送信ボタンのdisabledプロパティを外す
      $('.submit').prop('disabled', false);
   }
});

たったこれだけで実装可能です。

【まとめ】チェックしたら送信可能になるボタンの実装方法

今回は、チェックしたら送信可能になるボタンの実装について解説しました。

フォームの実装はなかなか癖があって難しいですが、コーディングでは必須です。

徐々に攻略していきましょう。

以上です。最後までお読みいただき、ありがとうございました。

最後に宣伝

ココナラで、コーディングの相談を受け付けています。

CSSが上手く作れない
JavaScriptが思ったように動かない
ブログのデザインを修正したい
勉強中でわからないところがあるから教えてほしい

このようなお悩みを解決していますので、「こんなの解決できる？」ということがあったら、ぜひ質問だけでも以下のリンクよりどうぞ。

ココナラ

...