jQueryでボタンの二重クリックを制御する

2020年5月26日2020年12月21日

jQueryでボタンの二重クリックを制御する

ブラウザアプリケーションでボタンをクリックする事でサーバにデータを送信する機能などあります。しかし画面が遷移するまでに複数回ボタンをクリックする事でデータをサーバに重複して送ってしまいかねません。

今回はクライアント側で制御する方法です。

色々なサイトを見ていたのですが「id」などを指定していたり、ちょっとコードが長かったりしていたので他にないかなと探していたら見つかりました。
サンプルも載せて下さっています。

参考サイト：jQueryで二度押し防止

コード

ファンクションが「id」を指定していないので、いちいちすべての「submit」に対して「id = submit」などを付与しなくて良いので助かりますね。

/*--ボタン二重クリック制御------------------------------*/
$(function () {
    $('form').submit(function () {
        $(this).find(':submit').prop('disabled', 'true');
    });
});