Web技術系中心に割と何でも更新中

jQueryを使用してチェックボックスのチェック数を制限させる(チェック数上限を設ける)方法

Programming

Web制作者

Web制作者
「入力フォームのチェックボックスで、チェック数を制限させたい」

こういった要望にお答えします。

本記事の内容

  • jQueryを使ったチェックボックスのチェック数制限の実装方法

こんにちは、mineです。
Web制作歴は7年になります。

入力フォームを設置する時に、複数の項目の中から選択させたいケースがありますよね。(※例えば、問い合わせフォームでお問い合わせ内容が選択肢として用意されていて、そこから選択するなど)

選択肢を実装するためのフォームタグのパターン

  • 一つだけ項目を選択させたい場合(ラジオボタン、セレクトボックス)
  • 複数の項目を選択可能にしたい場合(チェックボックス、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です。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果