（客户端）禁用提交按钮的最佳方法是什么？答案

【问题标题】：What is the best approach for (client-side) disabling of a submit button?（客户端）禁用提交按钮的最佳方法是什么？
【发布时间】：2010-09-07 22:43:31
【问题描述】：

详情：

仅在用户单击提交按钮后，但在回发到服务器之前禁用
ASP.NET 网络表单 (.NET 1.1)
更喜欢 jQuery（如果有的话）
必须在表单重新加载（即信用卡失败）时启用

这不是我必须这样做的必要条件，但是如果有一种简单的方法可以做到这一点而无需进行太多更改，我会这样做。（即如果没有简单的解决方案，我可能不会这样做，所以不要担心挖得太深）

【问题讨论】：

标签： asp.net javascript jquery webforms .net-1.1

【解决方案1】：

对于所有提交按钮，通过 JQuery，它会是：

$('input[type=submit]').click(function() { this.disabled = true; });

或者在表单提交时这样做可能更有用：

$('form').submit(function() {
    $('input[type=submit]', this).attr("disabled","disabled");
});

但我认为，如果我们对上下文有更多了解，我们可以更好地回答您的问题。

如果这是一个 ajax 请求，那么您需要确保在成功或失败时再次启用提交按钮。

如果这是一个标准的 HTTP 表单提交（除了使用 javascript 禁用按钮）并且您这样做是为了防止同一表单的多次提交，那么您应该在代码中进行某种控制处理提交的数据，因为使用 javascript 禁用按钮可能不会阻止多次提交。

【讨论】：

【解决方案2】：

你可以这样做：

$('form').submit(function() {
    $(this)
        .find(":submit,:image")             // get all the submit buttons
        .attr({ disabled : 'disabled' })    // disable them
        .end()                              // go back to this form
        .submit(function() {                // change the onsubmit to always reject.
            return false;
        })
    ;
});

这样做的好处：

它适用于您的所有表单和所有提交方法：
- 点击提交元素
- 按回车键，或
- 从其他代码调用form.submit()
它将禁用所有提交元素：
- <input type="submit"/>
- <button type="submit"></button>
- <input type="image" />
真的很短。

【讨论】：

【解决方案3】：

我猜你不希望他们在提交处理过程中多次点击提交按钮。

我的方法是完全隐藏按钮并显示某种状态指示器（动画 gif 等）。

这是一个非常人为的例子（它在技术上是原型，但我认为 jquery 版本会非常相似）：

<html>
    <head>
        <script type="text/javascript" src="include/js/prototype.js"></script>

        <script type="text/javascript">
            function handleSubmit()
            {
                $('submit').hide();
                $('progressWheel').show();
                return true;
            }
        </script>
    </head>
    <body>
        <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
        <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
    </body>
</html>

【讨论】：

+1 很有帮助，因为我需要在请求中发布的提交按钮值。禁用按钮意味着不发布值。

【解决方案4】：

在 JQuery 中：

$('#SubmitButtonID').click(function() { this.disabled = true; });

【讨论】：

【解决方案5】：

需要注意的是，您不应该在提交表单之前禁用该按钮。如果您在 OnClick 事件中使用 javascript 禁用按钮，您可能会丢失表单提交。

因此，我建议您使用 javascript 通过在其上方放置图像或将按钮移出可见范围来隐藏按钮。这应该允许表单提交正常进行。

【讨论】：

【解决方案6】：

可以通过三种方式提交应涵盖的表单。使用 David McLaughlin 和 Jimmy 的建议。一个将禁用提交按钮表单元素，而另一个禁用基本的 HTML 表单提交。

第三，这些不会禁止 Javascript 执行 form.submit()。 OnSubmit="return false" 方法仅适用于用户单击提交按钮或在输入表单元素中按 Enter 时。客户端脚本也需要处理。

【讨论】：

【解决方案7】：

怎么样

背后的代码：

btnContinue3.Attributes.Item("onclick") = "disableSubmit()"

Javascript：

function disableSubmit() {
    document.getElementById('btnContinue3').onclick = function() { 
        alert('Please only click once on the submit button!'); return false;
    };
}

这并不能解决如果回发超时会发生什么的问题，但除此之外它对我有用。

【讨论】：