2022/3/3 （更新日: 2022/3/4）

【disabledの扱い方】チェックを入れると有効化する送信ボタンの実装方法

Coding

お問い合わせフォームで同意するにチェックを入れたら有効化する送信ボタンってどうやって実装するの？

そんな疑問にお答えします。

お問い合わせフォームでチェックを入れるまでは送信ボタンが押せない状態にしておきたい、その実装方法を紹介します。

1 disabled属性
2 チェックを入れると有効化する送信ボタンの作成

disabled属性

今回やりたいことは以下のことです。

チェックボックスにチェックを入れるまでは送信ボタンは押せない
チェックを入れると送信ボタンは押せる状態となり、かつボタンの色が変わる
マウスオーバーでさらにボタンの色が変わる

まず最初の送信ボタンが押せない状態というのを設定するためには、「disabled属性」を理解しておく必要があります。

disabledとは？

「disabled」とはHTML要素の属性に付与されることによって、その要素を無効化させる働きがあります。

よく使われるのはフォーム要素で、入力フォームやボタンにdisabled属性を付与することで操作が一切できなくなります。

この機能を使うことで「チェックボックスにチェックを入れるまでは送信ボタンは押せない」という状態を作ります。

button要素にdisabled属性を設定する方法

<button disabled>ボタン</button>

このようにボタン要素内にdisabledという属性を付与することで、このボタンは無効化されます。
よってこのdisabledという属性を付与したり削除することで、送信ボタンの無効化、有効化を制御します。

今回はこれをjQueryで行います。

prop()メソッド

prop()メソッドとは主に、inputなどのフォームで使用する要素の属性やプロパティを取得・変更することができるjQueryメソッドです。

jQuery で disabled を設定する場合は prop() メソッドを使用して以下のように記述します。

disabledをつける場合

$(セレクタ).prop('disabled', true);

disabledを外す場合

$(セレクタ).prop('disabled', false);

つまり、セレクタが送信ボタンである場合ならdisabledをつける場合は無効化されたボタン、disabledを外す場合は有効化されたボタンとなるわけです。

チェックを入れると有効化する送信ボタンの作成

ここまでを踏まえた上で実際に「チェックを入れると有効化する送信ボタン」を作っていきます。

HTML

<!--  チェックボックス -->
<label>
  <input id="check" type="checkbox" name="check">同意する
</label>
<!-- 送信ボタン -->
<button 
  id="js-submit" 
  class="submit-button" 
  type="submit" 
  disabled
>送信</button>

チェックボックスは「label」の中に「input」を入れて紐づけています。

ここの解説はこちらです。

【フォーム作成に必須】】inputとlabelを紐づける２つの方法

CSS

submit-button {
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #00CC99;
  border-radius: 10px;
  margin: 30px;
  padding: 20px 50px;
  transition: all 0.3s;
  opacity: 0.6;
}
.submit-button.-active {
  opacity: 1;
}
.submit-button.-active:hover {
  background: #6020B0;
}

チェックボックスにチェックを入れたらボタンの色が変わるようにします。

そのために「-active」クラスを作っています。

このクラスのつけ外しもjQueryで行います。

つまり、

チェックボックスにチェックが入っていないとき → opacity: 0.6;

チェックが入ったとき → opacity: 1;

さらにマウスオーバーしたとき →background: #6020B0;

となるようにCSSを設定しています。

jQuery

$(function(){
  let $submit = $( '#js-submit' )
  $('#check').change(function() {
    // チェックボックスをチェックしたら発火
    if($(this).is(':checked')) {
      // 送信ボタンを有効化
      $submit.prop('disabled',false);
      // -activeクラスを付与
      $submit.addClass( '-active' );
    } else {
      // 送信ボタンを無効化
      $submit.prop('disabled',true);
      // -activeクラスを外す
      $submit.removeClass( '-active' );
    }
  });
});

jQueryでは

（送信ボタンを有効化・-activeクラスを付与）↔（送信ボタンを無効化・-activeクラスを外す）

をチェックボックスのチェックのありなしで切り替えるif構文になっています。

実際の動きは以下で確認してください。

See the Pen
チェックを入れると有効化する送信ボタン by toshi (@toshi78)
on CodePen.

以上です。