第二次單擊時jQuery禁用按鈕功能

Question

我試圖阻止用戶點擊頁面上的按鈕兩次，所以我一直在做的是在點擊一次后用jQuery隱藏該按鈕。 但有沒有一種方法，而不是隱藏該按鈕，以便在點擊一次后使用jQuery禁用該按鈕？

我試過了

$(document).ready(function () {
    $('#onClickHideButton').click(function () {
        $(this).prop('disabled', true);
    });
});

但是我對這個功能的問題是，一旦點擊按鈕它就會在它有機會提交表單之前被禁用，因此表單永遠不會被提交。

Answer 1

為什么不在提交表單時禁用按鈕，因為那是你真正想要做的......

$('#myForm').on('submit', function () {
    $('#myButton').prop('disabled', true);
});

Answer 2

而不是使用提交按鈕，只需使用一個簡單的按鈕，並手動發送表單提交。

<input type="button" id="onClickHideButton" value="Submit"/>

$('#onClickHideButton').click(function () {
     $(this).prop('disabled', true);
     $('#myform').submit();
});

或者您可以在提交表單時禁用該按鈕

$('#myform').on('submit', function(e) { 
    $('#onClickHideButton').prop('disabled',true);
});