jQuery チェックボックスの数とチェック済み数を比較する方法

ウェブサービスへの登録や退会をユーザーが行う際に規約に同意した後に登録 Or 退会してもらう際、ページ内に複数のチェックボックスを用意して全ての同意がとれた場合にのみ登録ボタンをアクティブにしたい場合などに利用します。

要素内チェックボックス総数とチェック済み数を比較

<script type="text/javascript">
//チェックボックスが配置された要素のID・・・[ #LEAVE ]
//チェックボックス毎に付与されたclass・・・[.leave_check ]
//登録 Or 退会ボタンのID・・・[ #leave_btn ]

(function($) {
$('.leave_check').on('click', function() {
    //チェックボックス数をカウント
    var cnt_input = $('#LEAVE input:checkbox').length;
    
    //チェック済みのチェックボックス数をカウント
    var cnt_checked = $('#LEAVE input:checkbox:checked').length;
    
    //チェックボックス総数とチェック済みが同じか比較する
    if (cnt_input === cnt_checked){
        $('#leave_btn').removeClass('disabled');
    }else{
        $('#leave_btn').addClass('disabled');
    }
  });

})(jQuery);
</script>