チェックボックスで分岐

2023年3月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「チェックボックスをチェックすると押せるようになるボタン」を作ってみます。

つくってみよう

参考：qam｜チェックボックスの状態によるボタンの活性化・非活性化の動きを解説！

まずはチェックボックスを用意します。IDをcheckboxとします。

<input type="checkbox" id="checkbox">同意する

ボタンを用意します。IDをsubmitとします。

disabled="disabled"でボタンを無効化しておきます。

<input type="checkbox" id="checkbox">同意する
			
<button id="submit" disabled="disabled">送  信</button>

以下のスクリプトを記述します。

$(function() {
  $('#submit').attr('disabled', 'disabled');
  $('#checkbox').click(function() {
    if ( $(this).prop('checked') == false ) {
      $('#submit').attr('disabled', 'disabled');
    } else {
      $('#submit').removeAttr('disabled');
    }
  });
});

attrとpropというのを使うそうです。勉強になります。

複数のチェックボックスをトリガーにする

参考：Qiita｜JavaScriptで複数のチェックボックスのうち1つでも選択されていたらボタンを有効にする

今度は「複数のチェックボックスすべてにチェックが入った場合のみ有効化するボタン」を作ってみます。

チェックボックスを3つ用意します。

IDとvalueをそれぞれ適当につけて、nameをchecksとしておきます。

<input type="checkbox" id="check1" value="1" name="checks">

<input type="checkbox" id="check2" value="2" name="checks">

<input type="checkbox" id="check3" value="3" name="checks">

さらにすべてのチェックボックスにonchange="change()"と付け加えます。

<input type="checkbox" id="check1" value="1" name="checks" onchange="change()">

<input type="checkbox" id="check2" value="2" name="checks" onchange="change()">

<input type="checkbox" id="check3" value="3" name="checks" onchange="change()">

先程と同様、ボタンのIDをsubmitにしてdisabled="disabled"で無効化します。

<input type="checkbox" id="check1" value="1" name="checks" onchange="change()">

<input type="checkbox" id="check2" value="2" name="checks" onchange="change()">

<input type="checkbox" id="check3" value="3" name="checks" onchange="change()">

<button id="submit" disabled="disabled">ボタン</button>

スクリプトを記述します。

function change() {
  const submitBtn = document.getElementById('submit');
  const checkboxes = document.querySelectorAll('input[name="checks"]:checked');
  if (checkboxes.length === 0) {
    submitBtn.disabled = true;
  } else {
    submitBtn.disabled = false;
  }
}

これで「複数のチェックボックスのうち1つでも選択されていたらボタンが有効になる」状態になりました。

checkbox.length === 0の部分を3に書き換えて、trueとfalseを入れ替えたら「複数のチェックボックスがすべて選択されるとボタンが有効になる」・・・はずです。

function change() {
  const submitBtn = document.getElementById('submit');
  const checkboxes = document.querySelectorAll('input[name="checks"]:checked');
  if (checkboxes.length === 3) {
    submitBtn.disabled = false;
  } else {
    submitBtn.disabled = true;
  }
}

まとめ

仮面ライダー〇ーズはハマったなあ～

次回もチェックボックスによる条件分岐をやってみようと思います。