ボタンの無効化と有効化の切り替え

今回はJSを使って入力フォームボタンの有効化と無効化の切り替えについてのメモです。

HTMLとCSSでのdisabledの使い方もご紹介します。

入力フォームに何も入力されていない状態ではボタンを無効化にし、

入力フォームに何かしら文字が入力がされたらボタンを有効化する方法についてです。

htmlでボタンの無効化

まずはhtmlがこちら。

<form method="post">
	<div>email<br><input type="text" class="js-form-validate"></div>
	<input type="submit" value="送信" class="btn" disabled>
</form>

disabledをそのまま入力するだけで無効化されます。

disabledをCSSで使う方法

まずは、cssに手形のカーソルをあてます。その他はご自由にcssを付け加えてください。

.btn {
        cursor: pointer;
        background: #333;
        color: #fff;
}

そして、disabledつまり無効化した状態にCSSをあてるには

:disabledを指定したい要素に付け加えるだけです。

.btn:disabled{
	cursor: not-allowed;
	background: #8d8d8d;
}

inputに書いてもOKです。

input[type="submit"]:disabled {
	cursor: not-allowed;
	background: #8d8d8d;
}

JSを使って入力されたらボタンを有効化

次にフォームに入力されたらボタンを有効化させる方法

js

$(function(){
	
    $('.js-form-validate').on('keyup',function () {
   
       let data = $(this).val();   
       $('.btn').prop('disabled', data ? false : true);
  
  });
});

jsはES6から導入された三項演算子で書いています。

三項演算子についての記事はこちらからどうぞ。

$(function(){})についてはこちらです。

ボタンの有効と無効の切り替えデモ

入力フォームに何も入力していない状態ではボタンが無効になっていて、

入力フォームに文字を入力するとボタンが有効化されます。

html

<form method="post">
			<div>email<br><input type="email" class="js-form-validate"></div>
			<input type="button" value="送信" class="btn" disabled>
		</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

css

.btn {
			cursor: pointer;
			background: #333;
			color: #fff;
      margin: 5px 0 0;
		}
		.btn:disabled{
			cursor: not-allowed;
			background: #8d8d8d;
		}

js

$(function(){
		  
		$('.js-form-validate').on('keyup',function(){
		 
       let data = $(this).val();
       $('.btn').prop('disabled', data ? false : true);
	  });
	});

jsを使わずCSSでボタンを切り替える

名前に文字を入力し、emailにemailの形式で入力すると、ボタンが有効になります。

html

<form id="form">
      <table>
        <tr>
          <th>name</th>
          <td><input type="text" required></td>
        </tr>
        <tr>
          <th>email</th>
          <td><input type="email" required></td>
        </tr>
      </table>
      <input type="button" value="送信" class="btn">
</form>

css

.btn {
  cursor: pointer;
}

#form:has(:invalid) .btn {
  pointer-events: none;
  opacity: 0.4;
}

最後までお読みいただきありがとうございました。