【jQuery】チェックをいれないと、ボタンを押せないようにする(活性/非活性)方法

悩んでいる人

チェックボックスをチェックを入れてからじゃないと、ボタンを押せないようにした。

本記事では上記の悩みを解決します。

本記事の信頼性

本記事を書いている僕はWeb制作歴2年です。
現在は、Shopify Experts認定企業でエンジニアとして勤務しています。
副業ではWordPressやShopify案件も行いながら、本業とは別でも毎月20万円以上は収益を得ることができています。
現在興味あるのは、Shopifyアプリ開発・React・バックエンド・ネットワーク・ブログ分析あたり。

よくあるケースとしては

・利用規約を読んでからじゃないと、メール送信ができません
・注意事項を読んでからじゃないと、商品の購入ができません

といったケースですかね。結構実装する経験があるのですが、毎回適当にネットからのコードをぱくってやっていたのですがいい加減自分でまとめようと思い記事にしております。

皆さんの丸コピの参考になれば幸いです^^

こんなのができます!

スポンサーリンク

目次

実装コード

See the Pen Untitled by TakahiroOkada (@okalog) on CodePen.

<section>
  <label class="checkbox">
    <input class="checkbox__input js-checkbox" type="checkbox">
    <span class="checkbox__text">同意する</span>
  </label>
  <div class="checkbox__button">
    <button class="button js-button" disabled="disabled">送信する</button>
  </div>
</section>
/* チェックボックス */
.checkbox__input {
  display: none;
}
.checkbox__text {
  padding-left: 60px;
  position: relative;
  cursor: pointer;
}
.checkbox__text::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox__input:checked + .checkbox__text:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 10px;
  width: 10px;
  height: 20px;
  transform: rotate(40deg);
  border-bottom: 5px solid #d01137;
  border-right: 5px solid #d01137;
}
/* ボタン */
.checkbox__button {
  margin-top: 60px;
}
.button {
  display: inline-block;
  padding: 20px 30px;
  font-size: 32px;
  background-color: #1c273e !important;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
$(function () {
  $(".js-checkbox").click(function () {
    const isChecked = $(this).prop("checked");
    if (isChecked === false) {
      $(".js-button").attr("disabled", "disabled");
    } else {
      $(".js-button").removeAttr("disabled");
    }
  });
});

コードの解説

HTML

 <label class="checkbox">
   <input class="checkbox__input js-checkbox" type="checkbox">
   <span class="checkbox__text">同意する</span>
 </label>

今回はデフォルトのチェックボックスではなくオリジナルでデザインしたチェックボックスにしたかったので、labelタグで囲んでおります。

「同意する」の文字を選択しても、チェックボックスと連動するようになります。

CSS

.checkbox__input {
  display: none;
}
.checkbox__text {
  padding-left: 60px;
  position: relative;
  cursor: pointer;
}
.checkbox__text::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox__input:checked + .checkbox__text:after {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 10px;
  width: 10px;
  height: 20px;
  transform: rotate(40deg);
  border-bottom: 5px solid #d01137;
  border-right: 5px solid #d01137;
}

オリジナルのチェックボックスのデザインにするために、.checkbox__inputは非表示にして、疑似要素などでデザインを作っています。このあたりも結構実務で使います。

jQuery

$(function () {
  $(".js-checkbox").click(function () {
  //処理が入ります。
  });
});

まずは、チェックボックスにチェックを入れたときのクリックイベントを取ります。

$(function () {
  $(".js-checkbox").click(function () {
    const isChecked = $(this).prop("checked");
    //処理が入ります。
  });
});

次に変数isCheckedにチェックボックスにチェックが入っているかどうかの判定をもたせます。
ここにはtruefalseが入ってきます。

$(function () {
  $(".js-checkbox").click(function () {
    const isChecked = $(this).prop("checked");
    if (isChecked === false) {
      $(".js-button").attr("disabled", "disabled");
    } else {
      $(".js-button").removeAttr("disabled");
    }
  });
});

あとは、チェックが入っているときといないときを条件分岐で分けてあげれば完成です。

まとめ

実務でも頻出の実装だと思います!

一応コピペでも動くとは思いますが、是非ご自身でも一度処理を追いながら実装してみてください^^

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる