【jQuery】inputタグをチェックしたらボタンが有効化になる実装

JavaScript

今回は、「inputタグをチェックしたらボタンが有効化になる実装」についてまとめました。

【jQuery】inputタグをチェックしたらボタンが有効化になる実装

完成形はこちら。

See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.

inputタグをチェックしたらボタンの色が変わり、さらにクリック出来るようになります。

HTML

<div class="parts">
  <label for="check">
    <input type="checkbox" id="check">
    <p>inputをチェックしたらボタン色が変わる</p>
  </label>
  <div class="button">
    <a href="https://yujiromx.com/" target="_blank" rel="noopener noreferrer">ボタンです</a>
  </div>
</div>

inputタグやボタンを用意します。

CSS

.parts {
  margin: 50px 20px;
}

.parts label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.parts label input {
  width: 30px;
  height: 30px;
}

.parts label p {
  font-size: 14px;
  margin-left: 10px;
}

.parts .button {
  margin-top: 15px;
}

.parts .button a {
  display: inline-block;
  width: 300px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: gray;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  border-radius: 10px;
  text-decoration: none;
}

.button a.click-on {
  pointer-events: auto;
}

ボタンはclick-onクラスが付いた時にクリック出来るようにスタイルを当てておきます。

jQuery

上からコード解説をしていきます。

$("#check").change(function () {
if ($(this).is(":checked")) {
$(".button a").css({ "background-color": "orange" });
$('.button a').addClass('click-on');
} else {
$(".button a").css({ "background-color": "gray" });
$(".button a").removeClass("click-on");
}
});

#checkつまりinputタグをつけたり外したりしたら関数が実行されます。

もしinputタグをチェックしたら、buttonのaタグが有効化されてボタンの色が変わります。

そしてbuttonのaタグにclick-onクラスがついてボタンがクリック出来るようになります。

inputタグのチェックを外したらbutton aの色がもとに戻り、click-onクラスが外れるのでクリックできなくなります。

まとめ

以上が、「inputタグをチェックしたらボタンが有効化になる実装」でした。

関連記事:

【CSS】display: flex;とmargin: auto;を使って要素の高さを揃える方法 画像の下に出来る余白の消し方について【WEB制作初心者向け】 ブロックを中央寄せにしてテキストだけ左寄せにする方法 【CSS】背景画像の上に薄い背景色を敷く方法