リストボックスの複数選択数制限

本日はリストボックス(セレクトボックス)の選択数の制限の仕方に関して記載したいと思います。
具体的にはjQueryを使用し、特定の数が選ばれたら他の選択項目を選択不可にする方法に関してです。

１．セレクトボックスをリストボックス化させる

<select>
  <option>選択してください</option>
  <option>項目 Ａ</option>
  <option>項目 Ｂ</option>
  <option>項目 Ｃ</option>
  <option>項目 Ｄ</option>
  <option>項目 Ｅ</option>
</select>

まずセレクトボックスの設置タグは上記の形になります。
実際に出力すると下記のような形で表示されます。

これを複数選択出来るように、リストボックス化させます。

<select multiple size="5">
  <option>項目 Ａ</option>
  <option>項目 Ｂ</option>
  <option>項目 Ｃ</option>
  <option>項目 Ｄ</option>
  <option>項目 Ｅ</option>
</select>

セレクトボックスを複数選択出来るリストボックスに変更するには、selectタグにmultipleを追加するコトで変更出来ます。
実際に出力すると下記のような形で表示されます。

また、一度に表示させる項目数をsizeで指定するコトも可能です。
上記の例では5つ表示させる形になっています。

実際に複数選択するには、ただのクリックだけではダメで、Windowsならctrlキーを押しながら、Macならcmdキーを押しながら選択するコトで、複数の項目を選ぶコトが出来るようになります。

２．選択出来る項目数を制限する

上記のままでは、出力されている項目全てを選択出来る形になっています。

しかし、場合によっては選択数を3つまでに絞りたいなど、選択出来る数を制限したい場合もあるかと思います。

その方法が以下の記述となります。

HTMLファイル

<select multiple size="5" class="select3">
  <option>項目 Ａ</option>
  <option>項目 Ｂ</option>
  <option>項目 Ｃ</option>
  <option>項目 Ｄ</option>
  <option>項目 Ｅ</option>
</select>

jsファイル

$('.select3').change(function() {
    var count = $(".select3 option:selected").length;
    var not = $('.select3 option').not(':selected');
     if(count >= 3) {
        not.attr("disabled",true);
    }else{
        not.attr("disabled",false);
    }
});

実装例

実際に実装例の部分で試していただくとわかると思いますが、3つ選択すると残りの項目は選択不可になります。

クラス名は適当にselect3と付けましたが各自好きなお名前に変更してください。
また、選択出来る項目数を変更するには、jsファイル部分 if(count >= 3) の数字を制限したい数に変更すればOKです。