jQueryを使用してチェックボックスのチェック数を制限させる（チェック数上限を設ける）方法
この記事の概要
Web制作者
入力フォームのチェックボックスで、チェック数を制限させたい。
どうやってやるんだろ…。
管理人
jQueryを利用して、チェック数に上限を持たせることができます。
この後詳しく説明しますね。
本記事の内容
- jQueryを使ったチェックボックスのチェック数制限の実装方法
入力フォームを設置する時に、複数の項目の中から選択させたいケースがありますよね。（※例えば、問い合わせフォームでお問い合わせ内容が選択肢として用意されていて、そこから選択するなど）
選択肢を実装するためのフォームタグのパターン
- 一つだけ項目を選択させたい場合（ラジオボタン、セレクトボックス）
- 複数の項目を選択可能にしたい場合（チェックボックス、multiple属性セレクトボックス）
- 複数の項目を選択可能にして、かつ選択項目数に上限を設けたい場合(チェックボックス+jQuery)
しかし、「複数の項目を選択可能だけど上限を3つまでにしたい」というようなことも場合によってはありえます。
この記事ではjQueryを使用してチェックボックスのチェック数を制限する方法を紹介します。
チェックボックスのチェック数制限機能の仕様
まず、下記が今回のチェックボックスのチェック数制限機能の仕様となります。
仕様
- 5つのチェックボックスの中で3つまで選択可能
- チェックボックスを3つ選択した時点で未選択のチェックボックスが選択不可になる
- チェックボックスが3つ選択された状態で、1つでもチェックを外すと再度チェックボックスが選択可能になる
実装イメージ
こんな感じの動作となります。
チェックボックスのチェック数制限機能の実装
具体的にチェックボックスのチェック数制限機能をを実装します。
HTMLを実装
<form method="post" name="chk_ctl">
<div class="input_item">
<ul>
<li><input type="checkbox" id="box_1" value="1" onclick="click_cb();"><label for="box_1" class="checkbox">野球</label></li>
<li><input type="checkbox" id="box_2" value="2" onclick="click_cb();"><label for="box_2" class="checkbox">サッカー</label></li>
<li><input type="checkbox" id="box_3" value="3" onclick="click_cb();"><label for="box_3" class="checkbox">バスケットボール</label></li>
<li><input type="checkbox" id="box_4" value="4" onclick="click_cb();"><label for="box_4" class="checkbox">バレーボール</label></li>
<li><input type="checkbox" id="box_5" value="5" onclick="click_cb();"><label for="box_5" class="checkbox">柔道</label></li>
</ul>
</div>
</form><li>タグ内に<input>、<label>タグを記述してチェックボックスを並べます。
onclick属性に、チェックボックスへのチェック可能不可能を制限するためのclick_cb()関数を記述しておきます(引数なし)。
CSSを実装
.input_item ul li {
list-style-type: none;
font-size: 21px;
margin: 0 0 22px 0;
}
.input_item ul li input[type="checkbox"]{
width: 25px;
height: 25px;
margin: -4px 5px 0 0;
display:inline-block;
vertical-align: middle;
}
.input_item ul li label{
display:inline-block;
vertical-align:middle;
line-height: 20px;
}
.input_item ul li.locked{
opacity: 0.75;
color: #aaa;
}今回は見栄えを少し整える程度の装飾をしています。
大事なポイントは、チェックボックスを透過させたり、テキストの配色を薄くして選択不可状態を表しているところです。
<li>タグ（チェックボックスを記述しているもの）にlockedという選択不可状態用のクラスを用意します。
jQueryでチェックボックスのチェック数を制限する
jQueryの読み込み
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>jQueryを<head>内に記述します。
jQuery
function click_cb(){
//チェックカウント用変数
var check_count = 0;
// 箇所チェック数カウント
$(".input_item ul li").each(function(){
var parent_checkbox = $(this).children("input[type='checkbox']");
if(parent_checkbox.prop('checked')){
check_count = check_count+1;
}
});
// 0個のとき（チェックがすべて外れたとき）
if(check_count == 0){
$(".input_item ul li").each(function(){
$(this).find(".locked").removeClass("locked");
});
// 3個以上の時（チェック可能上限数）
}else if(check_count > 2){
$(".input_item ul li").each(function(){
// チェックされていないチェックボックスをロックする
if(!$(this).children("input[type='checkbox']").prop('checked')){
$(this).children("input[type='checkbox']").prop('disabled',true);
$(this).addClass("locked");
}
});
}else{
$(".input_item ul li").each(function(){
// チェックされていないチェックボックスを選択可能にする
if(!$(this).children("input[type='checkbox']").prop('checked')){
$(this).children("input[type='checkbox']").prop('disabled',false);
$(this).removeClass("locked");
}
});
}
return false;
}HTMLのコーディングでも少し触れましたが、click_cb()関数の中にチェックボックス制限のコードを記述します。
チェックボックスをクリックした時点でのチェック数をカウント
変数check_countを宣言して0（初期値）を格納します。
.each()メソッドでチェックボックスが記述された<li>タグに対して、.prop('checked')メソッドを使ってチェックが入っているかを調べて
チェックが入っていたら変数check_countに1ずつカウントします。
<li>タグを一通りチェックして最終的にチェックボックスのチェック数を出します。
チェック数が0個・3個以上・それ以外の場合で異なる処理を記述する
チェック数が出せたら、if文で3パターンのチェック数ごとに処理を分けていきます。
まずチェック数が0個の時（チェックボックスへのクリックですべてチェックが外れた場合）、.removeClass()メソッドで、<li>タグすべてから選択不可状態用のクラスlockedを削除します。
次にチェック数が3個になった時、未チェックのチェックボックスを.prop('disabled',false)メソッドで選択不可、.addClass()メソッドでlockedクラスを追加します。
上記以外の時（今回はチェック数が1～2個の時）は、未チェックのチェックボックスを.prop('disabled',false)メソッドで選択可能、.removeClass()メソッドでlockedクラスを削除します。
まとめ
処理の流れが分かればjQueryで何をしているかがわかってくると思います。簡単なので実装してみてください。
ちなみに、今回はチェック数の上限を3個に設定しましたが、チェック数の上限を変えたい場合は今回のコードの中の変数check_countの不等号（check_count > 2のところ）で値を変えてやればOKです。