暂时禁用提交按钮答案

【问题标题】：Temporary disabling a Submit Button暂时禁用提交按钮
【发布时间】：2011-06-01 12:58:03
【问题描述】：

我有一个将大文件上传到服务器的表单。像这样的：

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

我需要防止用户在之前的处理尚未准备好时重新提交表单。如何在处理前禁用提交按钮并在提交操作后启用按钮？

【问题讨论】：

What is the best approach for (client-side) disabling of a submit button? 的可能重复项

标签： javascript jquery

【解决方案1】：

从 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);
});

所有其他解决方案都是错误的！ :)

开个玩笑，它们也会起作用，但这会捕获更多异常逻辑并正确处理属性。

【讨论】：

嘿，我想知道它是否会被视为财产。 +1。
记住.data() is accessible via your object already as well，例如myform.data('submitting') 在大多数情况下更容易解析。对于多表单情况，全局访问版本也可以更简单，例如$.data(this, 'submitting')，允许它在 ajax 风格的情况下同时处理多个表单。
只是想检查一下。在 sumbiting 结束后，'disabled' 自动设置为 false 是否正确？
@demas 您将不得不对其进行编码。我假设您在谈论表单是否未能通过客户端验证？如果失败，则必须手动将 disabled 设置为 false。如果页面实际上被刷新或重新导航到，那么是的，该按钮将再次启用。
好答案，您在这一行缺少括号if($.data(myform.get(0), 'submitting') {

【解决方案2】：

试试

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

然后

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

【讨论】：

此解决方案不考虑表单提交事件。看我的回答。

【解决方案3】：

您可以在他们单击后将属性disabled="true" 添加到元素。

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

Live Demo

【讨论】：

此解决方案不考虑表单提交事件。看我的回答。

【解决方案4】：

在 JQuery 中你可以这样做

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

【讨论】：

嗯，这是一个问题。如何从 js 提交我的表单？
此解决方案不考虑表单提交事件。看我的回答。
@Jordan，它会触发事件，按下按钮，@demas 您可以使用 javascript 轻松提交您的表单document.formname.submit()
我的意思是，您所做的只是禁用按钮，但有人可以轻松地在任何文本字段上按 Enter 键，表单仍然会提交。

【解决方案5】：

你可以像这样在 jquery 中禁用：

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

【讨论】：

如何在用户按下按钮后，但在 action.php 执行之前执行此代码？
其他帖子比较完整
此解决方案不考虑表单提交事件。看我的回答。

【解决方案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>

【讨论】：

【解决方案7】：

您可以像这样禁用双重表单提交：

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

【讨论】：