[jQuery] チェックボックスとサブミットボタンの連動(disabled)

チェックボックス(複数)のチェック状態を見て、サブミットボタンを有効・無効化させる。

コード

var $btnSubmit = $('.btn-submit');

if ($('.chck-required:checked').length == 0) {
  $btnSubmit.prop('disabled', true);
}

$('.chck-required').on('change', function() {
  if ( $('.chck-required:checked').length == $('.chck-required').length ) {
    $btnSubmit.prop('disabled', false);
  } else {
    $btnSubmit.prop('disabled', true);
  }
});
  1. チェックボックスが全くチェックされていない場合は、サブミットボタンを無効化する
  2. チェックボックスがチェックされた時
    • チェックボックスのチェック数がチェックボックス数と同じ(全てチェックされている)場合、サブミットボタンを無効化する
    • それ以外の場合、サブミットボタンを有効化する

twitterfacebookhatenafacebook