チェックボックス複数選択の上限制御ができるコードが動かない

Question

選択上限は2つまでできるチェックボックスをコピペで作りましたが、3項目すべてチェックできてしまっています。
何が間違っているかわからない状態なのでご指摘頂けると嬉しいです。

該当だと思われるコードです。
よろしくお願い致します。

<div class="block">
     <label class="block-title">性別 Sex </label>
     <div class="radio-wrapper">
     <input type="checkbox" id="detail01" name="check" class="radio-inline__input" checked>
     <label for="detail01" class="radio-inline__label">たまご </label>
     <input type="checkbox" id="detail02" name="check" class="radio-inline__input">
     <label for="detail02" class="radio-inline__label">ハム </label>
     <input type="checkbox" id="detail03" name="check" class="radio-inline__input">
     <label for="detail03" class="radio-inline__label" >ツナ</label>
     </div>
</div>   





 <script>
        $(function () {
          $('input[name="check"]').click(function() {
            var checked_length = $('input[name="check"]:checked').length;
            // 選択上限は2つまで
            if (checked_length >= 2) {
              $('input[name="check"]:not(:checked)').prop('disabled', true);
            } else {
              $('input[name="check"]:not(:checked)').prop('disabled', false);
            }
          });
        });  
    </script>

</main>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function(){
          $('.radio-inline__input').on('change',function(){
            $('.radio-inline__input:not(:checked)').prop('disabled',$('.radio-inline__input:checked').length>=2);
          });
        });
        $(function(){
            //送信ボタンクリック時hedden項目のformをサブミットする
            $('.submit').on('click', function(e){
              $('#mG61Hd').submit();
            });
    </script>
  </body>
</html>

Comments

[kei344]

質問タグに「Google Apps Script」を追加されてはいかがでしょう。

[momokoko]

ありがとうございます。
修正しました。

Answer 1

$(function(){
  $('.radio-inline__input').on('change',function(){
    $('.radio-inline__input:not(:checked)').prop('disabled',$('.radio-inline__input:checked').length>=2);
  });
});

Comments

[momokoko]

作成ありがとうございます。
うまく作動しませんでした。
ぼくの貼り付け場所が違っているかもしれないので、貼った場所も質問に追記しました。

[yambejp]

jQuery本体は読んでますか？
エラーがでていたら転記して下さい

サンプル
https://codepen.io/yambejp/pen/yLVNmEd

[momokoko]

サンプルでは動いていますね。。

自分の環境は、google App scriptでやっていまして、
ログを出してみると
「不明なエラーが発生しました。しばらくしてからもう一度お試しください。」
と出ていました。

[yambejp]

GASは詳しくないのですがjQueryを排除したらいけますか？
document.addEventListener('change',e=>{
if(e.target.classList.contains('radio-inline__input')){
var flg=document.querySelectorAll('.radio-inline__input:checked').length>=2;
document.querySelectorAll('.radio-inline__input:not(:checked)').forEach(x=>{
x.disabled=flg;
});
}
});

[momokoko]

</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
document.addEventListener('change',e=>{
if(e.target.classList.contains('radio-inline__input')){
var flg=document.querySelectorAll('.radio-inline__input:checked').length>=2;
document.querySelectorAll('.radio-inline__input:not(:checked)').forEach(x=>{
x.disabled=flg;
});
}
});

[momokoko]

このように貼り付けましたが、うまく動きませんでした。

[yambejp]

で、エラーは？

[momokoko]

すみません、記載を忘れました。

不明なエラーが発生しました。しばらくしてからもう一度お試しください。
と出ました。

ただ、このコードをコメントアウトしても同様のエラーが出たのでもっと他の問題かもしれないです。
一旦、この質問は閉じさせて頂きます。

[yambejp]

解決せずに閉じるときはご自身で状況をかいて
未解決のママ閉じて下さい