×

jQueryを使ってチェックボックスのチェック数を制限させてみた

2016年4月17日 コーディング

チェックボックス

入力フォームで、あらかじめこちらで決めた項目の中から選ばせたい場合があります。
だいたい下記のようにフォームタグが使い分けられます。

  • 一つだけ項目を選択させたい場合・・・ラジオボタン、セレクトボックス
  • 複数の項目を選択可能にしたい場合・・・チェックボックス、セレクトボックス(multiple属性使用)
  • 複数の項目を選択可能にして、かつ選択項目数に上限を設けたい場合・・・チェックボックス+jQuery

一つだけもしくは複数の項目をいくつでも選択可能にしたい場合は通常通りフォームタグを設置すればよいです。

しかし、「複数の項目を選ばせたいけど、選べるのは3つまでにしたい」ということも場合によってはあります。そんなときはチェックボックスのチェック数をjQueryによって制限します。

というわけで、今回はjQueryでチェックボックスのチェック数を制限する方法を紹介します。

サンプルで動作を確認

まずはDEMOをクリックしてサンプルで動作を確認してください。

DEMO

チェックボックス制限demo

DEMOでは5つのチェックボックスがあり3つまで選択可能にしています。

チェックボックスを3つ選択した時点で未選択のチェックボックスは選択不可となります(チェックボックスが透過する)。

htmlでコーディング

まずはhtmlでコーディングします。

	

チェックボックス選択項目数制限DEMO

好きなスポーツを3つまで選んでください。

liタグ内にinput・labelタグを記述してチェックボックスを並べます。

onclick属性に、チェックボックスへのチェック可能不可能を制限するためのclick_cb()関数を記述しておきます(引数なし)。

CSSで装飾する

htmlでコーディングしたらCSSで装飾します。

#checkbox_control .input_item ul li {
    list-style-type: none;
    font-size: 21px;
    margin: 0 0 22px 0;
}

#checkbox_control .input_item ul li input[type="checkbox"]{
	width: 25px;
	height: 25px;
	margin: -4px 5px 0 0;
	display:inline-block;
	vertical-align: middle;
}

#checkbox_control .input_item ul li label{
	display:inline-block;
	vertical-align:middle;
	line-height: 20px;
}

#checkbox_control .input_item ul li.locked{
	opacity: 0.75;
	color: #aaa;
}

今回のDEMOでは見栄えを少し整える程度の装飾をしています。

liタグ(チェックボックスを記述しているもの)にlockedという名前で選択不可状態用のクラスを用意します。

jQueryでチェックボックスのチェック数を制限する

jQueryでチェックボックスへのチェック数を制限します。



お約束のjQuery読み込み。


htmlのコーディングでも少し触れましたが、click_cb()関数の中にチェックボックス制限のコードを記述します。

前提として、チェックボックスは同時に3つまで選択可能とします。

jqueryの記述として下記の2つがあります。

  • チェックボックスをクリックした時点でのチェック数をカウント
  • チェック数が0個・3個以上・それ以外の場合で異なる処理を記述する

チェックボックスをクリックした時点でのチェック数をカウント
check_count変数を宣言して0(初期値)を格納します。

.each()メソッドでチェックボックスが記述されたliタグに対して、.prop(‘checked’)を使ってチェックが入っているかを調べて
チェックが入っていたらcheck_countに1ずつカウントします。liタグを一通りチェックして最終的にチェックボックスのチェック数を出します。

チェック数が0個・3個以上・それ以外の場合で異なる処理を記述する
チェック数が出せたら、if~else if~文で3パターンのチェック数ごとに処理を分けていきます。

まずチェック数が0個の時(チェックボックスへのクリックですべてチェックが外れた場合)、.removeClass()メソッドで、liすべてからlockedクラス(選択不可状態用のクラス)を削除します。

次にチェック数が3個以上の時(というかチェック数が3個になった時)、未チェックのチェックボックスを.prop(‘disabled’,false)メソッドで選択不可、.addClass()メソッドでlockedクラスを追加します。

上記以外の時(今回のDEMOではチェック数が1~2個の時)は、未チェックのチェックボックスを.prop(‘disabled’,false)メソッドで選択可能、.removeClass()メソッドでlockedクラスを削除します。

まとめ

いかがでしたか?

処理の流れが分かればjQueryで何をしているかがわかってくると思います。簡単なので実装してみてください。

ちなみに、今回のDEMOではチェック数の上限を3個に設定しましたが、チェック数の上限を変えたい場合は今回のコードの中のcheck_countの不等号(check_count > 2のところ)で値を変えてやればOKです。

関連記事