ボタンの２重クリックを防止する方法

登録フォームやお問い合わせフォームのbuttonが２重クリックや連打されると、DBに重複登録が起きたり、メールの複数送信などの問題が起きてしまいます。
その問題を解決する際に、jQueryのメソッドを使う方法を解説します。

jQuery

buttonタグなどのdisabled属性の切り替えを、jQueryのprop()によって切り替えることで画面が遷移するまでボタンを無効にする。

対象のボタン

<form>
    <!-- 入力フォーム -->
    <input type="submit" id="reg">登録
</form>

jQueryメソッド

$(function() {
    $("#reg").click(function() {
        // ボタンを非活性にし、２重クリックや連打防止
        $(this).prop('disabled', true);
        // 一番近くのformをsubmit(これがないとsubmitされない)
        $(this).closest('form').submit();
    });
});

参考

【JavaScript】二重クリック、連打防止
 jQuery API 日本語リファレンス

著者：E.R（株式会社ウィズツーワン）