jQuery:チェックされたら or 入力されたら送信可能にするボタンを実装する方法

  • Posted on
  • Category : Tips
jQuery:チェックされたら or 入力されたら送信可能にするボタンを実装する方法

割と頻繁に使うので備忘録。jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと、使う場面が多いのではないかと思います。

2014年2月27日 追記
各方面から記述方法についてご指摘頂いたので、少し修正したコードを追記しました。

チェックボックスにチェックされたら送信可能にするボタン

チェックボックスにチェックされたら送信可能にするボタン

ページが表示された際は画像上部のようにボタンにはdisableが指定されて送信できない状態になっています。
それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisableを解除して送信可能にするというものです。

実装にはjQueryを使用するので予め読み込ませおき、それぞれ以下のように記述をします。

HTML

<input type="checkbox" id="check" /><label for="check"><a href="#" target="_blank">利用規約</a>に同意します</label>
<input type="submit" id="submit" value="Submit" />

jQuery

$(function() {
	$('#submit').attr('disabled', 'disabled');
	
	$('#check').click(function() {
		if ($(this).prop('checked') == false) {
			$('#submit').attr('disabled', 'disabled');
		} else {
			$('#submit').removeAttr('disabled');
		}
	});
});

上記ではinput type="checkbox"にはid="check"を、input type="submit"にはid="submit"をそれぞれ指定しているので、変更したい場合はそれぞれ該当の箇所を変更してください。
また、画像のようにdisableが指定されている際に見栄えを変えたいという時は、CSSで#submit[disabled] { /* style here... */ }のような感じで記述すれば、任意でスタイル指定もできます。

実際の動きは以下で確認できます。

Back to top

文字が入力されたら送信可能にするボタン

文字が入力されたら送信可能にするボタン

こちらも先ほどと同様でページが表示された際はボタンにdisableが指定されて送信できない状態になっており、ボタン横にあるテキストフィールド内に文字が入力されたら、ボタンに指定してあるdisableを解除して送信可能な状態になるというものです。

メールアドレスのバリデータとかと組み合わせて、簡易的なメルマガ登録フォームみたいなもので使用しているのをたまに見かけたりします。

実装にはjQueryを使用するので予め読み込ませおき、それぞれ以下のように記述をします。

HTML

<input type="text" id="text" />
<input type="submit" id="submit" value="Submit" />

jQuery

$(function() {
	if ($('#text').val().length == 0) {
		$('#submit').attr('disabled', 'disabled');
	}
	$('#text').bind('keydown keyup keypress change', function() {
		if ($(this).val().length > 0) {
			$('#submit').removeAttr('disabled');
		} else {
			$('#submit').attr('disabled', 'disabled');
		}
	});
});

チェックボックスの時と同様、上記ではinput type="text"にはid="text"を、input type="submit"にはid="submit"をそれぞれ指定しているので、変更したい場合はそれぞれ該当の箇所を変更し、disable指定の有無でスタイルを変更したい場合も同じくCSSで#submit[disabled] { /* style here... */ }のような感じで記述すれば任意で指定できます。

実際の動きは以下で確認できます。

追記:コードの修正を行いました

各方面から記述方法についてご指摘頂いたので、HTMLはそのままで、jQueryの記述を少し修正しました。
attr()を使用していた箇所はprop()へ、bind()を使用していた箇所はon()にそれぞれ変更してあります。

修正:チェックボックスにチェックされたら送信可能にするボタン

jQuery

$(function() {
	$('#submit').prop('disabled', true);
	
	$('#check').on('click', function() {
		if ($(this).prop('checked') == false) {
			$('#submit').prop('disabled', true);
		} else {
			$('#submit').prop('disabled', false);
		}
	});
});

修正:文字が入力されたら送信可能にするボタン

jQuery

$(function() {
	if ($('#text').val().length == 0) {
		$('#submit').prop('disabled', true);
	}
	$('#text').on('keydown keyup keypress change', function() {
		if ($(this).val().length > 0) {
			$('#submit').prop('disabled', false);
		} else {
			$('#submit').prop('disabled', true);
		}
	});
});

実際の動きを確認できるDEMOもこちらのコードを使用して新たに作成したので、こちらのコードを使用した場合の動きは以下で確認できます。

Back to Top

jQuery:チェックされたら or 入力されたら送信可能にするボタンを実装する方法

jQuery:チェックされたら or 入力されたら送信可能にするボタンを実装する方法

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。