PeaceJet

証券会社で証券外務員をやりながら、マーケティングやデータ分析・UI/UX改善などを行っています。

【jQuery】チェックボックスを最低でも一つ以上チェックさせたい。

f:id:PeaceJet:20180206204602p:plain

最低でも一つ以上チェックさせる

チェックボックスが複数設置されているグループに対して、最低でも一つ以上チェックボックスにレ点を入れさせたい場合があります。
今回は、その方法をご紹介できればと思います。

HTML5のバリデーション機能を活かす

フロントエンドでは、さまざまなやり方が存在しますがHTML5に標準で備わっているバリデーション機能を活かす方法として、以下の実装がしっくりきたので紹介いたします。
結論から申し上げれば、あらかじめinputタグにrequired="required"を入れておいて、一つでもチェックされていればrequired="required"をはずすといった動作を行っています。

Bootstrap4

今回、コードにはBootstrap4を使用しています。
Bootstrap4では、required="required"が入っている場合、あらかじめ赤色で表示され、チェックを入れると緑色に変わります。
視覚的にもわかりやすく、UXの向上が期待できると考えています。

jQuery

jQueryを使用して、イベントごとにrequired="required"を変更しています。

先に、触ってみて下さい。

See the Pen Bootstrap4でチェックボックスのバリデーション by OneWorld (@OneWorld) on CodePen.


HTML

例として、3カ国のうち一つ以上を選択させたい場合を考えてみます。

<form method="post" action="" class="was-validated mt-3 mb-3" id="form">
  <section class="card mb-3">
    <div class="card-header">
      <section class="col" id="country">
        <h5>選択してください</h5>
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" value="日本" name="checkbox[]" id="a" required="required">
          <label for="a" class="custom-control-label">
            <span class="label">日本</span>
          </label>
        </div>
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" value="アメリカ" name="checkbox[]" id="b" required="required">
          <label for="b" class="custom-control-label">
            <span class="label">アメリカ</span>
          </label>
        </div>
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" value="中国" name="checkbox[]" id="c" required="required">
          <label for="c" class="custom-control-label">
            <span class="label">中国</span>
          </label>
        </div>
      </section>
    </div>
  </section>
</form>
JavaScript
$(function(){
    var requiredCheckboxes = $('#country :checkbox[required]');
    requiredCheckboxes.change(function(){
        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        } else {
            requiredCheckboxes.attr('required', 'required');
        }
    });
});

さいごに

皆さんのお役にたてば、幸いです。

/* ブログタイトルを取得 */