Question

详细说明：

仅在用户单击提交按钮后，但在回发到服务器之前禁用
ASP.NET Webforms（.NET 1.1）
首选jQuery（如果有任何库）
如果表单重新加载（即信用卡失败），则必须启用

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

Answer 1

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

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

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

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

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

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

如果这是一个标准的HTTP表单提交（除了用javascript禁用按钮）并且你这样做是为了安全防范同一表单的多个提交，那么你应该在代码中有某种控制权处理提交的数据，因为禁用带有javascript的按钮可能无法阻止多次提交。

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

这样做的好处：

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

Answer 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>

Answer 4

在JQuery中：

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

Answer 5

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

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

Answer 6

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

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

Answer 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;
    };
}

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

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

7 个答案: