Question

我有一个asp.net应用程序，我想在点击它们时立即禁用这些按钮，以防止多次提交。我想使用jquery，因为该网站已经广泛使用它。

我尝试的是：

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

以上将禁用该按钮，并且页面提交，但是从不调用click处理程序上的asp.net按钮。只需删除上面和按钮就可以正常工作。

有更好的方法吗？或者说，我做错了什么？

UPDATE 好的，我终于花了一点时间把一个非常简单的页面放在一起。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SubTest.aspx.cs" Inherits="MyTesting.SubTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#form1").submit(function () {
                $('input[type=submit]', $(this)).attr("disabled", "disabled");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Button 2" />
    </div>
    </form>
</body>
</html>

背后的代码如下：

using System;

namespace MyTesting {
    public partial class SubTest : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        if (IsPostBack) {
            // this will execute when any button is pressed
            Response.Write("postback");
        }
    }
        protected void Button1_Click(object sender, EventArgs e) {
        // never executes
            System.Threading.Thread.Sleep(1000);
            Response.Write("Button 1 clicked<br />");
        } // method::Button1_Click

        protected void Button2_Click(object sender, EventArgs e) {
        // never executes
            System.Threading.Thread.Sleep(1000);
            Response.Write("Button 2 clicked<br />");
        } // method::Button2_Click
    }
}

当你点击某个按钮时，它显然会禁用这些按钮，但不会点击按钮点击。

呈现HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#form1").submit(function () {
                $('input[type=submit]', $(this)).attr("disabled", "disabled");
            });
        });
    </script>
</head>
<body>
    <form name="form1" method="post" action="SubTest.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTcxODU4OTc0MWRkParC5rVFUblFs8AkhNMEtFAWlU4=" />
</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKB57WhCAKM54rGBgK7q7GGCC6LlWKFoij9FIBVuI0HOVju/fTy" />
</div>
    <div>
        <input type="submit" name="Button1" value="Button" id="Button1" />
        <input type="submit" name="Button2" value="Button 2" id="Button2" />
    </div>
    </form>
</body>
</html>

Answer 1

你可以采用稍微不同的方式，如下所示：

$(function () {
  $("#aspnetForm").submit(function () {
    $('input[type=submit]').click(function() { return false; });
  });
});

这样做会使未来的点击无效，基本上使他们什么都不做。当您禁用输入时，它还会删除使用<form>提交的键/值对，因此由它触发的服务器端操作不起作用。

值得注意的是，在 jQuery 1.4.3 中，您可以将其缩短为：

$(function () {
  $("#aspnetForm").submit(function () {
    $('input[type=submit]').click(false);
  });
});

Answer 2

在提交之前禁用按钮的方法有两个影响： -

a）按钮呈现禁用的外观。

b）按钮的值不会在表单参数中发布。

如果按钮的值没有发布到服务器，ASP.Net不知道按下了哪个按钮，因此它不会运行相关的OnClick处理程序。

要验证在

后面的代码中添加以下内容

protected void Page_Load(object sender, EventArgs e)
{
    Response.Write("Load " + IsPostBack + "<br />");
    foreach (string s in Request.Form.AllKeys)
    {
        Response.Write(string.Format("s:'{0}' = {1}<br />", s, Request.Form[s]));
    }
}

然后运行页面（使用J.S.禁用按钮而不使用）。如果按钮的值没有发布到服务器，ASP.Net不知道按下了哪个按钮，因此它不会运行相关的OnClick处理程序。

Answer 3

只是另一个观察。或者，您可以使用漂亮的叠加忙消息来锁定UI。

加价部分：

$(function() { // when document has loaded

    ($.unblockUI); //unlock UI

    //Show busy message on click event and disable UI
    $('#btnHelloWorld').click(function() {
    $.blockUI({ message: '<h4><img src="busy.gif" />Please wait...</h4>' });

    });

});

<asp:Button ID="btnHelloWorld" runat="server" Text="Hello World" /><br/>

背后的代码：

   Protected Sub btnHelloWorld_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnHelloWorld.Click
        Label1.Text = "Hello World"
        Threading.Thread.Sleep(5000)
    End Sub

查看jQuery BlockUI Plugin

Answer 4

我只是想添加一个额外的分辨率。我们决定在点击按钮后完全删除该按钮并将其替换为一些文本。

要做到这一点，我们做了：

$(function () {
    $(".DisableButton").click(function () {
        $(this).hide();
        $(this).after('<p>Please Wait.  Retrieving information.  This may take up to 60 seconds.</p>');

    });
});

请注意，这会隐藏按钮，然后在按钮代码后注入一些html。隐藏它允许.Net继续并在回发期间运行onclick处理程序，同时将其作为屏幕上的可点击内容删除。

Answer 5

如果您的页面上有ASP.NET验证控件，则会变得复杂。但是之前已经回答过：Disable button on form submission

Answer 6

将此属性添加到按钮：

usesubmitbehavior="False"

这将在onclick中插入如下内容：

javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$Main$Tabs$SaveTab$Cancel", "", true, "", "", false, false))

即使按钮被禁用，此代码也会导致回发。显示确认对话框并允许取消回发更有趣：

    var click = $("[id$='_Cancel']")[0].onclick;
    $("[id$='_Cancel']")[0].onclick = null;
    $("[id$='_Cancel']").bind('click', function (event) { addFeeSchedule.onCancelClick(event) });
    $("[id$='_Cancel']").bind('click', click);

为了防止立即发生回发，删除.net插入的onclick代码，并使用jQuery在自己的函数之后绑定它。使用event.stopImmediatePropagation()来阻止回发：

onCancelClick: function (event) {

    var confirmResponse;

    confirmResponse = confirm('No fee schedule will be created.\n\nAre you sure you want to cancel?');

    if (confirmResponse == true) {

        showWait();
        event.target.disabled = 'true';

    } else {

        event.stopImmediatePropagation();

    }

},

Answer 7

Nick Craver提供的答案是迄今为止我在网上任何地方都能找到的最佳解决方案。但是，有一种情况，解决方案不能正常工作 - 当表单包含UpdatePanel中的提交按钮时，其UpdateMode属性设置为＆＃34;条件＆＃34;和/或ChildrenAsTriggers属性设置为false。

在这些情况下，异步回发完成后，更新面板的内容不会自动刷新。因此，如果这些更新面板包含任何提交按钮，那么给定的解决方案将有效地永久禁用这些按钮。

以下针对该解决方案的增强功能通过在异步或部分＆＃39;回发后重新启用按钮来解决此问题：

var canProcessClicks = true;

if (typeof (Sys) != 'undefined') {
    // handle partial-postback
    var requestManager = Sys.WebForms.PageRequestManager.getInstance();
    requestManager .add_initializeRequest(function() {
        // postback started
        canProcessClicks = false;
    });
    requestManager .add_endRequest(function() {
        // postback completed
        canProcessClicks = true;
    });
}

$(function () {
    $('input[type=submit]').on("click", function () {
        return canProcessClicks ;
    });
    $("#aspnetForm").submit(function () {
        if (typeof (Sys) != 'undefined' && Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
            // this is an async postback so ignore because this is already handled
        } else {
            // full postback started
            canProcessClicks = false;
        }
    });
});

Answer 8

为此，您必须使用输入按钮属性禁用所有控件

<script language="javascript" type="text/javascript">
    function MyDisableFunction() {
        alert(`Now You Postback Start`);
        $(":input").attr("disabled", true);
        return true;
    }

</script>

更详细的检查this link

在.net应用程序中使用jquery禁用回发后的按钮

8 个答案: