【jQuery】チェックボックスの選択数を制限する方法

2022.7.6

【jQuery】チェックボックスの選択数を制限する方法

フォームで複数選択できるチェックボックスですが、選択個数を2つまでにしたい、それ以上は選択出来ない様にしたいという要望があったりします。

今回はチェックボックスの選択数を制限する方法をご紹介します。

チェックボックスの選択数を制限する方法

$("input[type=checkbox]").click(function(){
    var $count = $("input[type=checkbox]:checked").length;
    var $not = $('input[type=checkbox]').not(':checked')

    if($count >= 2) {
        $not.attr("disabled",true);
    }
    else{
        $not.attr("disabled",false);
    }
});

実装結果

<br /> See the Pen <a href="https://codepen.io/Uchaaan/pen/eYMpKQY"><br /> チェックボックス：選択数を制限</a> by Uchaaan (<a href="https://codepen.io/Uchaaan">@Uchaaan</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

いかがでしょうか。
if($count >= 2)の数字を変えると、選択数を変更できます。