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

发布时间：2020-12-15 23:58:26 所属栏目：asp.Net 来源：网络整理

导读：我有一个asp.net应用程序,我想在它们被点击后立即禁用按钮,以防止多次提交.我想使用jquery,因为无论如何网站已经大量使用它. 我试过的是： $(document).ready(function () { $("#aspnetForm").submit(function () { $('input[type=submit]',$(this)).attr("d

我有一个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]',"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]',"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>

解决方法

您可以采用略有不同的方式,如下所示：

$(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);
  });
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!