チェックボックスの値でボタンの有効/無効を切り替える

フォーム画面で、同意するにチェックを入れたときにのみボタンが有効になるようにしてほしいといわれたので対応しました。
ボタンは画像を使わないといけなかったのであわせて対応しましたよ。忘れやすい自分のために忘れないうちに備忘録として残しておきます。

ボタンにあらかじめ「disabled」を設定して無効化してあります。

<div class="consent">
<p>「同意する」にチェックを入れてください</p>
<form>
<label class="checkbox"><input type="checkbox">同意する</label>
<div class="button-container">
<button type="submit" disabled><span class="enter-btn-inactive">お問い合わせ</span></button>
</div>
</form>
</div>

jQueryチェックを有無を判定して、チェックが入っていたらボタンにあらかじめ指定してある「disabled」とspanタグのclass「enter-btn-inactive」を削除して「enter-btn」を追加しています。
チェックが外れた時、チェックが入っていない時はボタンに「disabled」を追加、spanタグにclass「enter-btn」を追加して「enter-btn-inactive」削除しています。

checkboxによる制御 | よく使うjQueryfine×3

$(function() {
$(".consent :checkbox").click(function() {
if($(".consent :checked").length > 0) {
$(".button-container :button").removeAttr("disabled");
$("span.enter-btn-inactive").removeClass("enter-btn-inactive").addClass("enter-btn");
} else {
$(".button-container :button").attr("disabled", "disabled");
$("span.enter-btn").removeClass("enter-btn").addClass("enter-btn-inactive");
}
});
});

画像を指定する際はbuttonのスタイルを設定しておかないと悲しいことになります。
class「enter-btn」はボタン有効時のスタイルです。マウスオーバー時の画像はcssスプライトで処理しています。
class「enter-btn-inactive」はボタン無効のスタイルです。

inputやbuttonタグを画像化すると出てくる枠(背景のボタン表示)を無くす方法ぷろめし

button {
overflow: visible;
margin: 0;
padding: 0;
width: auto;
border: 0;
background: none;
font-size: 0;
line-height: 0;
cursor: pointer;
}
.enter-btn {
display: block;
padding: 0;
width: 186px;
height: 46px;
border: 0;
background: url(../img/buttons.png) no-repeat 0 0;
text-indent: -9999px;
cursor: pointer;
}
.enter-btn:hover {
background: url(../img/buttons.png) no-repeat 0 -56px;
}
/*disabled*/
.enter-btn-inactive {
display: block;
padding: 0;
width: 186px;
height: 46px;
border: 0;
background: url(../img/buttons.png) no-repeat 0 0;
text-indent: -9999px;
opacity: 0.8;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
cursor: auto;
}

チェック項目が2つのときはこんな感じで対応したけどもっとスマートな方法があるんだろうなぁ...。

$(function() {
$(".consent01 :checkbox").click(function() {
if($(".consent01 :checked").length > 0 && $(".consent02 :checked").length > 0) {
$(".button-container :button").removeAttr("disabled");
$("span.enter-btn-inactive").removeClass("enter-btn-inactive").addClass("enter-btn");
} else {
$(".button-container :button").attr("disabled", "disabled");
$("span.enter-btn").removeClass("enter-btn").addClass("enter-btn-inactive");
}
});
$(".consent02 :checkbox").click(function() {
if($(".consent01 :checked").length > 0 && $(".consent02 :checked").length > 0) {
$(".button-container :button").removeAttr("disabled");
$("span.enter-btn-inactive").removeClass("enter-btn-inactive").addClass("enter-btn");
} else {
$(".button-container :button").attr("disabled", "disabled");
$("span.enter-btn").removeClass("enter-btn").addClass("enter-btn-inactive");
}
});
});

電脳備忘録

広告

ごむを