暫時禁用提交按鈕

Question

我有一個將大文件上傳到服務器的表單。 像這樣的東西：

<form id="myform" action="myaction.php">
  <p>
    <!--fields -->
  </p>
  <input type="submit" class="submit" value="Send" />
</form>

我需要防止用戶在之前的處理尚未准備好時重新提交表單。 如何在處理之前禁用提交按鈕並在提交操作后啟用按鈕？

Answer 1

嘗試

$("input.submit").attr('disabled', 'disabled');

接着

$("input.submit").removeAttr('disabled');

Answer 2

從 1.6 版開始，在 jQuery 中執行此操作的正確方法是使用新的 prop() 方法。

同樣重要的是您將事件附加到表單的提交事件，而不是提交按鈕本身。 這樣，如果有人在填寫表格時按 Enter 鍵，就像我相信我們都一樣，該按鈕仍將被禁用。

正確代碼：

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

如果您真的想阻止對多次提交的表單的訪問，您也可以停止提交表單，而不僅僅是禁用按鈕：

var myform = $("#myform");
myform.submit(function() {
    if($.data(myform.get(0), 'submitting') {
        return false;
    }

    $.data(myform.get(0), 'submitting', true);
    $(".submit", myform).prop('disabled', true);
});

所有其他解決方案都是錯誤的::)

開個玩笑，它們也會起作用，但這會捕獲更多異常邏輯並正確處理屬性。

Answer 3

在他們單擊元素后，您可以將屬性disabled="true"添加到元素。

$('.submit').click(function(){$(this).attr('disabled',true)});

現場演示

Answer 4

在 JQuery 你可以這樣做

$(".submit").click(function() {
  $(".submit").attr("disabled","disabled");
  //Post your form here..
});

Answer 5

您可以像這樣在 jquery 中禁用：

$(".submit").attr("disabled","disabled");

Answer 6

假設您有 jQuery 可用。

<form id="myform" action="myaction.php" onsubmit="submitForm();">
  <p>
    <!--fields -->
  </p>
  <input id="submit_button" type="submit" class="submit" value="Send" />
</form>

<script>
    function submitForm(){
         $("#submit_button").attr("disabled","disabled");
    }
</script>

Answer 7

您可以像這樣禁用雙重表單提交：

<form id="myform" action="myaction.php" onsubmit="this.onsubmit=function(){return false;}">