・チェックボックスをクリックしたらボタンを有効にしたい！どうやるの？
こんな疑問にお答えします。
「同意する」にチェックする項目があるお問い合わせフォームは、よく見ますよね。
そのチェックボックスをクリックしないと、送信しない仕様にしたいはず。
下記みたいに↓
これ以外と簡単に実装できちゃいます。
すぐにできるよ！
ということで、この記事では「同意チェックボックスでボタンを有効に切り替え方法」について解説していきます！
・同意チェックボックスでボタンを有効に切り替え
目次
【jQuery】同意チェックボックスでボタンを有効に切り替え【disabled】
結論から言うと、実装コードはこちらになります↓
See the Pen Untitled by jito-coder (@jito-coder) on CodePen.
<div class="form-box">
<form>
<div class="form-box__item">
<input type="checkbox" id="consent" name="consent">
<label for="consent">同意する</label>
</div>
<input type="submit" value="送信" class="btn" id="btn-consent" disabled>
</form>
</div>.btn {
font-size: 16px;
text-align: center;
width: 200px;
max-width: 100%;
padding: 10px;
margin-top: 20px;
border-radius: 30px;
color: #fff;
background-color: #000066;
border: 1px solid transparent;
}
.btn[type="submit"][disabled] {
color: #ccc;
border: 1px solid #ccc;
background-color: #fff;
}$("#consent").change(function () {
if ($(this).is(":checked")) {
$("#btn-consent").prop("disabled", false);
} else {
$("#btn-consent").prop("disabled", true);
}
});コードの意味としてはこういうこと。
- inputに「disabled」をつける
- 「disabled」がある時のCSSを記述
- チェックボックスをクリックしたら「disabled」をなくす
順に解説していきます。
まず送信ボタンのinputタグに対して、「disabled」属性をつけておきます。
<input type="submit" value="送信" class="btn" id="btn-consent" disabled>これでボタンをクリックできない状態になりました。
次に「disabled」属性の有無それぞれに対して、CSSを記述していきます。
.btn[type="submit"][disabled] {
color: #ccc;
border: 1px solid #ccc;
background-color: #fff;
}「disabled」がついてるとき、上記の背景色・色・ボーダーが反映。
最後にjQueryを用いて、チェックボックスをクリックしたら「disabled」属性をなくす記述をします。
$("#consent").change(function () {
if ($(this).is(":checked")) {
$("#btn-consent").prop("disabled", false);
} else {
$("#btn-consent").prop("disabled", true);
}
});上記コードは、チェックボックス（#consent）の中身が変更（change）したら、送信ボタン（#btn-consent）のdisabledを有効or無効にするという意味。
もしチェックボックスにチェックが入っていたらdisabledを無効（false）に、チェックが入ってなかったらdisabledを有効（true）にしています。
これで同意ボタンをクリックしたら、送信できるような仕様に実装することができました！
簡単だね！
ちなみにわざわざCSSに、disabledに対しての記述しなくてもOKなやり方があります。
それがjQueryにCSSのスタイル変更を記述すること。
要は下記ですね↓
$("#consent").change(function () {
if ($(this).is(":checked")) {
$("#btn-consent").prop("disabled", false);
$("#btn-consent").css({ "background-color": "#000066" });
} else {
$("#btn-consent").prop("disabled", true);
$("#btn-consent").css({ "background-color": "#ccc" });
}
});この場合、クリックしたらcssを変更させることができます。ちょっと効率化したいときは、このやり方がオススメ！
jQueryではなく、JavaScriptで記述したい場合もあるはず。
正直やりかたは変わりません。
コードはこちら↓
See the Pen Untitled by jito-coder (@jito-coder) on CodePen.
<div class="form-box">
<form>
<div class="form-box__item">
<input type="checkbox" id="consent" name="consent" onclick="btnConsent();">
<label for="consent">同意する</label>
</div>
<input type="submit" value="送信" class="btn" id="btn-consent">
</form>
</div>function btnConsent() {
if (consent.checked) {
document.getElementById("btn-consent").disabled = "";
} else {
document.getElementById("btn-consent").disabled = "disabled";
}
}
window.onload = btnConsent;jQueryと違う点はこちら↓
- 初期値、HTMLにdisabled属性をつけない
- ロード時、もしくはチェックボックスをクリックしたらJavaScriptが発動
- 送信ボタンに対してdisabled属性をつけたり外したり
同意チェックボックスが複数ある時・ボタンを有効に切り替え【disabled】
最後にチェックボックスが複数ある時の場合の、ボタン切り替え方法を紹介します。
案件によっては、同意するチェック項目が２つ以上の時もあるんですよね。
先述したやり方では、チェックボックスを１つでもクリックしたら、送信ボタンを押せるようになってしまいます。
つまり指定方法を少し変える必要があるんですよ。
やり方は簡単。こちら↓
See the Pen お問い合わせチェック jQuery by jito-coder (@jito-coder) on CodePen.
<div class="form-box">
<form>
<div class="form-box__item">
<input type="checkbox" id="consent1" name="consent" class="js-checkbox">
<label for="consent1">同意する</label>
</div>
<div class="form-box__item">
<input type="checkbox" id="consent2" name="consent" class="js-checkbox">
<label for="consent2">ボタン送信後はいかなる場合でも了承する</label>
</div>
<input type="submit" value="送信" class="btn" id="btn-consent" disabled>
</form>
</div>$(".js-checkbox").change(function(){
if ($('.js-checkbox:checked').length == $('.js-checkbox').length) {
$("#btn-consent").prop("disabled", false);
}else {
$("#btn-consent").prop("disabled", true);
}
});チェックボックスを全てクリックしたら、送信ボタンが有効になっていますよね。
コードの意味としてはこう↓
- チェックボックスそれぞれに同じクラスをつける
- そのクラス名の数と、チェックされたクラス名の数をif文に
順に解説していきます。
まず複数の同意チェックボックスに対して、同じクラス名をつけます。
<div class="form-box__item">
<input type="checkbox" id="consent1" name="consent" class="js-checkbox">
<label for="consent1">同意する</label>
</div>
<div class="form-box__item">
<input type="checkbox" id="consent2" name="consent" class="js-checkbox">
<label for="consent2">ボタン送信後はいかなる場合でも了承する</label>
</div>今回でいうと「js-checkbox」ですね。
そして重要なのがjQueryのここ↓
if ($('.js-checkbox:checked').length == $('.js-checkbox').length)これは【もし「js-checkbox」のクラスを持つ要素の数と、チェックがついてる「js-checkbox」の要素の数が同じだったら】という意味。
２つのチェックボックスがあり、２つともチェックが入っていたら～～となります。
つまり同意チェックボックス全てにチェックが入ったら、送信ボタンのdisabled属性がなくなり、有効になるということ。
これで複数チェックボックスがあっても、送信ボタンの切り替えをすることができます！
ちなみにですがフォーム関連の他記事も参考に↓
【簡単】jquery.autokana.jsの使い方【ふりがなを自動入力】 
【簡単】ajaxzip3の使い方【郵便番号→住所自動入力】 【jQuery】同意チェックボックスでボタンを有効に切り替え【disabled】：まとめ
- 「disabled」属性をjQueryを使い付け外しする
- JavaScriptでも可能
- 複数チェックボックスがあるときも実装可能
お問い合わせフォーム実装の時によく使うので覚えておこう！
