[jQuery] 複数チェックボックスで1つ以上チェックされたらボタン有効

2019-06-122019-12-07JavaScriptjQuery

チェックボックスが複数あって、1つもチェックされていなかったらサブミットボタンを無効にし押せない、1つでもチェックされればサブミットボタンを有効（押せる）にする方法。jQueryを使っている。

HTML

jQueryを使った方法なので、jQueryを読み込んでおく。

<label><input type="checkbox" class="chk" name="hage[]" value="299">チェックボックス299</label>
<br /><label><input type="checkbox" class="chk" name="hage[]" value="300">チェックボックス300</label>
<br /><label><input type="checkbox" class="chk" name="hage[]" value="301">チェックボックス301</label>
<br /><label><input type="checkbox" class="chk" name="hage[]" value="355">チェックボックス335</label>
<br /><label><input type="checkbox" class="chk" name="hage[]" value="407">チェックボックス407</label>
<br /><br />
<button type="submit" id="btn1">-----完了-----</button>

jQuery

$(function(){
  // 初期状態のボタンは無効
  $("#btn1").prop("disabled", true);
    // チェックボックスの状態が変わったら（クリックされたら）
    $("input[type='checkbox']").on('change', function () {
        // チェックされているチェックボックスの数
        if ($(".chk:checked").length > 0) {
          // ボタン有効
          $("#btn1").prop("disabled", false);
        } else {
          // ボタン無効
          $("#btn1").prop("disabled", true);
        }
    });
});

ボタン有効・無効の切り替えは、prop()を使う！ (attr()の使用は推奨されない。)

チェックボックスがクリックされた時を取得する場合、「.on('change'」でなく「.on('click'」でもいい。

Demo

いずれかのチェックボックスにチェックすると、ボタンが有効になる。

See the Pen checkbox with disabled button by AgoPeanuts (@AgoPeanuts) on CodePen.