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

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

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

(jQuery使用)

checkbox に check が付いてる時： ボタン押せて、 Google に遷移する

checkbox に check が付いていない時： ボタン押したら alert 出す

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

https://thimbleprojects.org/szaizen/614600/

まず最初に、チェックによって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('同意するにチェックして下さい'); 
    }; 
  }); 
 
});