jQueryからJavascriptの変換例

Question

以下のjQueryを、Javascriptに書き換えてみてください。
お手数ですが、よろしくお願いいたします。

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

Comments

[maisumakun]

どのような背景でそれが必要となったのでしょうか？

[hitugi]

別の質問のときも、対応ありがとうございました。
チェックボックスの複数選択で、制限付き設定がうまく行きません。
[]があるかないかで、変わりますが、PHP側の受け取りにも影響しています。

[maisumakun]

> チェックボックスの複数選択で、制限付き設定がうまく行きません。
[]があるかないかで、変わりますが、PHP側の受け取りにも影響しています。

えっと、それはjQueryをなくしてJavaScriptで書き直しても改善しないと思うのですが…

[hitugi]

そう言われては、また振り出しに戻りますね。

とりあえず試してみたいので、答えをいただくことは可能ですか？

Answer 1

window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('[name="city[]"]').forEach(x=>{
    x.addEventListener('change',()=>{
      var flg=document.querySelectorAll('[name="city[]"]:checked').length>=2;
      document.querySelectorAll('[name="city[]"]:not(:checked)').forEach(x=>{
        x.disabled=flg;
      });
    });
  });
});

Comments

[hitugi]

ベストアンサーありがとうございました。