多くの場合、ユーザーは送信ボタンを数回押してボタンが確実にクリックされていることを確認し、ダブルフォーム送信の問題を引き起こします。一般的な解決策は、ユーザーがクリックした後に送信ボタンを無効にすることです。

1.送信ボタンを有効/無効にする

1.1送信ボタンを無効にするには、送信ボタンに `disabled`属性を追加するだけです。 

$("#btnSubmit").attr("disabled", true);

1.2無効化されたボタンを有効にするには、

disabled`属性をfalseに設定するか、

disabled`属性を削除します。 

$('#btnSubmit').attr("disabled", false);
or
$('#btnSubmit').removeAttr("disabled");

2. jQueryの完全な例

<!DOCTYPE html>
<html lang="en">

<body>
<h1>jQuery - How to disabled submit button after clicked</h1>

<form id="formABC" action="#" method="POST">
    <input type="submit" id="btnSubmit" value="Submit"></input>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<input type="button" value="i am normal abc" id="btnTest"></input>

<script>
    $(document).ready(function () {

        $("#formABC").submit(function (e) {

           //stop submitting the form to see the disabled button effect
            e.preventDefault();

           //disable the submit button
            $("#btnSubmit").attr("disabled", true);

           //disable a normal button
            $("#btnTest").attr("disabled", true);

            return true;

        });
    });
</script>

</body>
</html>

参考文献


  1. jQuery Submit API


jquery


submit button