【问题标题】：Disabling submit buttons before postback在回发之前禁用提交按钮
【发布时间】：2013-07-29 00:57:53
【问题描述】：

我想在回发之前禁用页面上的所有提交按钮。找到 3 个（稍微）不同的代码示例，但没有一个在我的场景中有效。

<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(new function () {
        //debugger;

        // 1
        $('#form1').one('submit', function () {
            alert('.one');
            $(this).find('input[type="submit"]').attr('disabled', 'disabled');
        });

        // 2
        $("#form1").submit(function () {
            alert('.submit1');
            $('input[type=submit]').click(function () { return false; });
        });

        // 3
        $("#form1").submit(function () {
            alert('.submit2');
            $('input[type=submit]').click(false);
        });
    });
</script>

HTML（来自查看源代码）：

<body>
    <form method="post" action="WebForm12.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjA0OTM4MTAwNGRk6dbofDK5YUWMwPmdBDnRWPCTyBN22BpAo7Y3C+2Gycs=" />
</div>

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKC36LkAgKr4aeRA6gaPoGNYlZvnjW07iB+LnlhIUr0qrTFHOADKmQQuhv0" />
</div>
    <div>
        <input type="submit" name="btnPost" value="Post" id="btnPost" />
    </div>
    </form>
</body>

更新

嗯，正如 putvande 所指出的，实际问题是定义就绪事件函数时的 new 关键字。但是，代码示例仍然没有达到目标。

示例 1 实际上并没有运行相关的 OnClick 处理程序，因为它没有将按钮的值回传到服务器，因为它被禁用了。

示例 2/3 一次阻止了后续回发，但在 UI 上保持启用按钮。

进一步搜索最终找到了更合适的技术来解决问题。下面的代码使用 onbeforeunload 事件完美禁用提交按钮。

window.onbeforeunload = DisableButtons;

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

【问题讨论】：

我不认为您的第一个示例会起作用，因为您使用的是旧版本的 jQuery。但是你想做什么？点击提交按钮后，您想禁用提交按钮吗？
@putvande 是的。以避免在回发过程中重新提交。
虽然它实际上并没有到达alerts
您是否同时在代码中使用了所有 3 个示例？我认为第一个 ($('#form1').one('submit'...) 会给你一个错误，对吧？
一次使用一个。没有错误。什么都没发生。即使它没有到达警报。

标签： jquery asp.net submit postback

【解决方案1】：

您的事件永远不会分配给您的form。你需要改变：

$(document).ready(new function () {
                  ^^^

收件人：

$(document).ready(function () {

如果您更改提交功能将正常工作。

【讨论】：

【解决方案2】：

在某种程度上，您可以按照下面的说明进行操作。

您可以使用 display:none 再添加一个按钮。在可见按钮javascript点击事件中，您可以禁用该按钮并调用隐藏按钮的点击（document.getElementById('btnHidden').click()）。

需要在可见按钮点击时执行的实际代码进入隐藏按钮的事件处理程序。

更新：

我没有假设更大的图景..如果应用范围广泛，您可能需要考虑这个..

对于按钮 OnClientClick，您可以分配此功能...

function disableButton(btnID)
{
     setTimeout(function(){document.getElementById(btnID).style.background = "disabled.jpg";}, 10);
     document.getElementById(btnID).disabled = true;
     return true;
}

“disabled.jpg”是一个背景，您可以将其分配给背景，使按钮具有禁用外观。

这样，您可以暂时为用户提供禁用外观；但这只是很短的时间，通过这种方式，表单已经发布到服务器。

【讨论】：

您的解决方法可能会奏效。但是，我想使用母版页和 jQuery 在应用程序范围内实现它。

【解决方案3】：

$('input[type="submit"]').attr('disabled', 'disabled');
return false;

【讨论】：

虽然它实际上并没有到达alerts