チェックボタンにチェックを入れたら、送信ボタンが押せるようになるように実装する方法です。
完成のイメージはこんな感じ。
「利用規約に同意する」にチェックを入れると、送信ボタンが押せるようになります。
よく見る仕様ですよね。
チェックボックスと送信ボタンのCSSは初期化し、オリジナルのCSSをあてています。
フォームのCSSを初期化したデザインで、チェックしたら送信可能になるボタンを実装している記事が見当たらなかったので、まとめていきます。
フォームのCSSを初期化する理由は、以下のように、ブラウザによってそれぞれデザインが大きく変わってくるからです。
この記事を書いている私（わや@wayasblog）は、Web制作会社でマークアップエンジニアとして働いています。
入社後すぐに「チェックしたら送信可能になるボタンの実装」をすることがあり、今後も使うと思うので、備忘録として残しておきます。
スポンサーリンク
チェックしたら送信可能になるボタンの実装方法
さっそくCodePenでコードを見ていきましょう！
See the Pen dyGyzvP by わや@ブログ/プログラミング挑戦中 (@wayasblog) on CodePen.
コピペすれば動きますが、それぞれ解説していきますね。
HTMLは特別なことはないので、
- CSS
- jQuery
について見ていきます。
CSSの解説
チェックボックスと送信ボタンはCSSを初期化して、オリジナルのデザインをあてています。
これは最初にも説明しましたが、ブラウザ間の差異をなくすためです。
フォームの初期化に関しては、はにわまんさんの以下に記事が大変参考になります。
チェックボタンの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が思ったように動かない
- ブログのデザインを修正したい
- 勉強中でわからないところがあるから教えてほしい
このようなお悩みを解決していますので、「こんなの解決できる？」ということがあったら、ぜひ質問だけでも以下のリンクよりどうぞ。
コメント