js チェックボックスの選択不可、項目数上限処理について

Question

$(function () {
    // チェックボックスをチェックしたら発動
    $('input[name="test[]"]').change(function () {
        // ①チェックが入ったチェックボックスの個数を変数に格納
        var len = $('input[name="test[]"]:checked').length;
        // ②チェックが4つ以上入ったら
        if (len >= 4) {
            // ③disabledを付けてチェックできなくする
            $('input[name="test[]"]').not(':checked').attr('disabled', 'disabled');
            // チェックが2つ未満だったら
        } else {
            // ④disabledを削除してチェックできるようになる
            $('input[name="test[]"]').not(':checked').removeAttr('disabled');
        }
    });
});

こちらの処理を書いたんですが、これではページを更新した時にチェック可能状態になってしまい、4つ以上選択できる状態になっています。

これをページ更新または入りなおした時に既に4つである場合は選択不可の状態にしておきたいです。

書き直していただけませんか。よろしくお願いします。
できれば解説もしていただければと思います。

Answer 1

$(function(){
  var max=4;
  $('[name="test[]"]').on('change',function(){
    var flg=$('[name="test[]"]:checked').length>=max;
    $('[name="test[]"]:not(:checked)').prop('disabled',flg);
  }).eq(0).trigger('change');
});

Answer 2

いちばん手抜きな方法としては、「ページ表示時にハンドラを実行してしまう」方法があります。

$(function () {
    // チェックボックスをチェックしたら発動
    $('input[name="test[]"]').change(function () {
      // 中身は省略
    }).change();
});

Comments

[退会済みユーザー]

チェックしたらっていうやつを最後に呼び出してっていうことですか。
確かに進みましたが...すいません簡単に解説を。

[maisumakun]

> チェックしたらっていうやつを最後に呼び出してっていうことですか。

そのとおりです。特にこのハンドラ内で「いま変更したもの」に依存するコードはありませんので、単に実行すれば適切な処理を適用できます。

[退会済みユーザー]

でも表示時に[チェック]はクリックも何もしてないですよね。「した」っていうことに強制したんですか？

[maisumakun]

最後の.change();は、動作に関係なく「ハンドラを呼び出す」という意味です。

[退会済みユーザー]

やったことになんかできるんですね。知らなかったです。勉強になりました。
他の方の回答もありがたくメモさせていただきます。ありがとうございました。

[hentaiman]

＞やったことになんかできるんですね。
その理解の仕方は雑過ぎる。「jquery メソッドチェーン」で検索して何故メソッドチェーンが出来るのかjqueryの特徴を調べて知識補足した方が良いですよ。