jQuery を使って checkbox の上限選択数を制御する

HTML フォームの checkbox を選択できる上限を任意に設定するための処理を jQuery で書いてみた。指定数以上を選択したとき alert() でダイアログボックスを出す例はたくさんあるようだが、ここではダイアログボックスを出さずに選択済みのものをひとつ減らすようにしている。ダイアログボックスが出ないので、上限値を越えたときの選択操作が楽だと思う。

HTML の記述は次のようになる。class や id 属性の値はこのサンプルと同じである必要はなくて自由に設定して構わない。また name 属性はこの処理では使っていない。

<input type=”checkbox” class=”chkbox_cls” id=”chkbox_0″ name=”chkbox” value=”foo” onclick=”ltd_chkbox(this)” />foo
<input type=”checkbox” class=”chkbox_cls” id=”chkbox_1″ name=”chkbox” value=”bar” onclick=”ltd_chkbox(this)” />bar
                :
<input type=”checkbox” class=”chkbox_cls” id=”chkbox_N” name=”chkbox” value=”baz” onclick=”ltd_chkbox(this)” />baz

それぞれの checkbox における onclick イベント発生時に呼び出すのが次の JavaScript 関数。変数 limit_len に選択可能な上限数を設定しておく。サンプルでは 3 としているので、仮に checkbox が 10 個あったとしても 3 個以上はチェックできない。4 個めをチェックするとすでにチェック済みのものから 1 個のチェックが自動的に外れる。コード中に jQuery() と記述している部分は、もちろん $() としても構わない。

function ltd_chkbox(obj) {
  var limit_len = 3;   # 選択可能な上限値
  var attr_name = ‘.’ + jQuery(obj).attr(‘class’) + ‘:checked’;
  var checked_len = jQuery(attr_name).length;

  var tail = false;
  for (var i = 0; i < checked_len; i++) {     if (jQuery(jQuery(attr_name)[i]).attr('id') == jQuery(obj).attr('id')         && i == checked_len - 1) {       tail = true;     }   }   if (checked_len > limit_len) {
    var idx = tail ? 0 : checked_len – 1;
    jQuery(jQuery(attr_name)[idx]).attr(‘checked’, false);
  }
}