ボタンの2重クリックを防止する

フォームなどで、ボタンの2重クリックを防止する方法をいくつか試してみたのでメモしておきます。

サンプルコード

クリック時にローディングに切り替えてみます。

HTML

<div class="btn-wrap">
	<button class="btn">送信</button>
	<div class="loading">
		<img src="loading.gif">
	</div>
</div>

CSS

.btn-wrap {
	width: 300px;
	margin: 0 auto;
	text-align: center;
}
.loading {
	display: none;
}

JavaScript

$(function() {
	$('.btn').on('click', function() {
		$('.btn').hide();
		$('.loading').show();
	});
});

ローディングに切り替えるデモページ

ローディング表示ではなく、ボタンをdisabled状態にしてみます。

HTML

<div class="btn-wrap">
	<button class="btn">送信</button>
</div>

JavaScript

$(function() {
	$('.btn').on('click', function() {
		$('.btn').prop('disabled', true);
	});
});

disabledのデモページ

ajaxで通信している場合など、一定時間後に元に戻して見ます。

HTML

<div class="btn-wrap">
	<button class="btn">送信</button>
	<div class="loading">
		<img src="loading.gif">
	</div>
</div>

JavaScript

$(function() {
	$('.btn').on('click', function() {
		$('.btn').hide();
		$('.loading').show();

		// 3秒後に元に戻す
		setTimeout(function() {
			$('.btn').show();
			$('.loading').hide();
		}, 3000);
	});
});

今回は3秒後に元に戻していますが、実際は通信完了後のコールバックで実装するとよいと思います。
一定時間で元に戻すデモページ

ボタンクリック時ではなく、フォーム送信時にローディング表示もできます。

HTML

<form action="index4.html">
	<div class="btn-wrap">
		<button class="btn">送信</button>
	</div>
</form>

JavaScript

$(function() {
	$('form').on('submit', function() {
		$('.btn').hide();
		$('.loading').show();
	});
});

フォーム送信時のデモページ