Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

(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('同意するにチェックして下さい');
    };
  });

});
szaizen
3年目Webエンジニアです✏️ フロント強いウーマンになりたい
liginc
上野でウェブ制作を行うクリエイティブ集団です。HP制作、プロモーション、システム開発等を行っています。
https://liginc.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away