[JavaScript] チェックボックスによるボタンの活性/非活性の切り替え

はじめに

この記事では、Webサイトの「利用規約への同意」等で使用される、チェックボックスによるボタンの活性/非活性の切り替えのJavaScriptでの実装方法をまとめていきます。

1. HTMLファイルの編集

<input type="checkbox" id="agreement-check">
<label for="agreement-check"><a href="#" target="_brank">利用規約</a>に同意する</label>
<button type="submit" value="登録" class="submit_btn" disabled=”disabled”>登録</button>

2. CSSファイルの編集

.submit_btn {
  cursor: pointer;
  background-color: #344767;
  border-radius: 5px;
  border: none;
  width: 100px;
  height: 40px;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: 500;
  font-size: 16px;
}
.submit_btn:disabled {
    pointer-events: none;
    opacity: .5;
}

3. JavaScriptファイルの編集

$(function () {
  $("#agreement-check").click(function () {
    if ($(this).prop("checked") == false) {
      //チェックが入っていなかったら
      $(".submit_btn").attr("disabled", "disabled"); //disabledをつける
    } else {
      $(".submit_btn").removeAttr("disabled"); //disabledを外す
    }
  });
});

おわり

チェックボックスのチェックの有無を判別し、ボタンタグにdisabledをつけ外しし、CSSでスタイルを変更することによって実装しました。