jQuery 画面表示時にjQueryが効かない。

Question

以下のコードでcheckboxを3つまでしかcheckできないコードを書きました。

$(function (){
  $('.check-max3').click(function () {
    let checked_length = $('.check-max3:checked').length;

    // 選択上限は3つまで
    if (checked_length >= 3) {
      $('.check-max3:not(:checked)').prop('disabled', true);
    } else {
      $('.check-max3:not(:checked)').prop('disabled', false);
    }
  });
});

「プロフィール作成画面」では問題なくcheckを3つまでしか付けられないのですが、「プロフィール編集画面」の際(あらかじめ3つcheckedがついた状態で表示されます。)では4つ目のcheckができてしまいます。

画面が表示されてからscriptが動作しているのか確認のため、 alert()を追加してみました。

$(function (){
 alert("アラートを表示します。")
  $('.check-max3').click(function () {
    let checked_length = $('.check-max3:checked').length;

    // 選択上限は3つまで
    if (checked_length >= 3) {
      $('.check-max3:not(:checked)').prop('disabled', true);
    } else {
      $('.check-max3:not(:checked)').prop('disabled', false);
    }
  });
});

そうすると、プロフィール編集画面を表示した際にalretが表示されたので、scriptは画面読み込み時に実行されていると認識しています。

ではなぜプロフィール編集画面（あらかじめcheckedが3つ付いた状態）を表示したときに4つ目のcheckが出来てしまうのかが分かりません。

Comments

[m.ts10806]

html、CSSも提示してください。

Answer 1

コメントありがとうございました。

今回の関数以外にも（今回の関数の下に）checkboxを操作する関数があり、それを$(input[type="checkbox"]').prop('disabled', false);
と書いており、これが邪魔しておりました

また、無名関数で呼び出していたので、以下のように修正しました。

$(function ()
{
  checkMax();
    $('.check-max3').click(checkMax);
});

function checkMax() {
    const checked_length = $('.check-max3:checked').length;
  // 選択上限は3つまで
$('.check-max3:not(:checked)').prop('disabled', 3 <= checked_length);

}

Answer 2

そのコードだとチェックボックスがクリックされたタイミングでしかチェックしていないからです。
それに対応しようと思ったらHTML上では一旦全部Disabledにして(じゃないとjQueryロードまでの間にクリックされる)
jQueryのreadyイベントのタイミングでDisabledを解除しつつチェックボックスクリック時と同じチェックをすれば
最初からHTML上で4つ以上付いてない限りは行けますよ。

https://codepen.io/riafeed/pen/dymgRMv

Answer 3

そうすると、プロフィール編集画面を表示した際にalretが表示されたので、scriptは画面読み込み時に実行されていると認識しています。

$('.check-max3').clickイベント処理は読み込まれますが、実行はされません。
check-max3 をclickしたときに実行されます。
下記で確認ください。

$(function (){
  $('.check-max3').click(function () {
    alert("アラートを表示します。")

    let checked_length = $('.check-max3:checked').length;

    // 選択上限は3つまで
    if (checked_length >= 3) {
      $('.check-max3:not(:checked)').prop('disabled', true);
    } else {
      $('.check-max3:not(:checked)').prop('disabled', false);
    }
  });
});

HTMLでchecked以外のチェックボックスにdisabled を付加しておくか、
$('.check-max3:not(:checked)').prop('disabled', true);を読み込み時に実行するかしておけばいいでしょう。

Codepenサンプル