【jQuery】チェックボックスとボタンの連動

チェックボックスとボタンの連動に関してのまとめです。

(jQuery使用)

checkbox に check が付いてる時： ボタン押せて、 Google に遷移する
checkbox に check が付いていない時： ボタン押したら alert 出す

このようなお題をもとに実装してみました。

まず最初に、チェックによってdisableの属性を付与するかしないかしようかなぁと考えたのですが、
disable時にボタンをクリックしてalert出すのが難しそうなので、
disableにするのではなく、disableであるように見せる方法で行こうと考えました。

html
チェックボックスとボタンを作成します。

html

<h1>Javascriptの課題です</h1>
    <div>
      <label for="check">同意する</label>
      <input type="checkbox" id="check">
    </div>
    <div id="btn" class="btn disable">ボタンです</div>

css
チェック時のボタンのスタイル　→　btnクラス
非チェック時のボタンのスタイル　→　disableクラス

css

.btn {
  display: inline-block;
  padding: 0.5em 1em;
  color: #FFF;
  background-color: darkorange;
  font-size: 15px;
  cursor: pointer;
}
.btn:hover {
  background-color: orange;
}
.disable {
  background-color: gray;
  cursor: not-allowed;
}
.disable:hover {
  background-color: gray;
}

javascript
チェックボックス操作時

• チェックされている場合　⇒　disableクラスを取り除く（removeClassメソッドを使用）
• チェックされていない場合　⇒　disableクラスを追加する（addClassメソッドを使用）

ボタン押下時

• チェックされている場合　⇒　ページを遷移する
• チェックされていない場合　⇒　アラートを表示する

javascript

$(function() {
  
  //チェックボックス操作時
  $('#check').click(function(){
    if($(this).prop('checked')) {
      $('#btn').removeClass('disable');
    } else {
      $('#btn').addClass('disable');
    }
  });
  
  //ボタン押下時
  $('#btn').click(function(){
    if($('#check').prop('checked')) {
      window.location.href = 'https://www.google.co.jp/';
    }else{
      alert('同意するにチェックして下さい');
    };
  });
  
});