How to dynamically disable buttons on a page after sending back to server?

I've seen example code for submitting a form, but I want to disable all the buttons on my web form after it is sent back to the server - my attempt is below but it isn't working.

aspx:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <hr />
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
            <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
            <asp:Button ID="Button3" runat="server" Text="Button" OnClick="Button3_Click" />
            <asp:Button ID="Button4" runat="server" Text="Button" OnClick="Button4_Click" />
        </div>
    </form>
    
<script type="text/javascript">
    $(":button").keyup(function () {
        $(":button").prop('disabled', true);
    });
 
</script>

</body>
</html>

Open in new window

using System;
using System.Threading;

namespace TestForDisableButtonsOnPage
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            ButtonClick(1);
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            ButtonClick(2);
        }

        protected void Button3_Click(object sender, EventArgs e)
        {
            ButtonClick(3);
        }

        protected void Button4_Click(object sender, EventArgs e)
        {
            ButtonClick(4);

        }

        private void ButtonClick(int i)
        {
            Label1.Text = $"Button {i} was clicked";
            Thread.Sleep(5000);
        }
    }
}

Open in new window

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestForDisableButtonsOnPage.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <hr /> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" /> <asp:Button ID="Button3" runat="server" Text="Button" OnClick="Button3_Click" /> <asp:Button ID="Button4" runat="server" Text="Button" OnClick="Button4_Click" /> </div> </form> </body> </html>

using System; using System.Threading; namespace TestForDisableButtonsOnPage { public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { ButtonClick(1, (Button)sender); } protected void Button2_Click(object sender, EventArgs e) { ButtonClick(2, (Button)sender); } protected void Button3_Click(object sender, EventArgs e) { ButtonClick(3, (Button)sender); } protected void Button4_Click(object sender, EventArgs e) { ButtonClick(4, (Button)sender); } private void ButtonClick(int i, Button btn) { btn.Enabled = false; Label1.Text = String.Format("Button {0} was clicked", i.ToString()); //Thread.Sleep(5000); } } }

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LVL 15

Leonidas DosasCommented: 2017-11-27

Select the element type via jquery as follow

$("button").keyup(function () {
        $("button").prop('disabled', true);
    });

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial

LVL 57

Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented: 2017-11-28

if you want a Server Side .NET approach, you can try:

(tested using VS 2010)

Web Front:

Code behind:

How to dynamically disable buttons on a page after sending back to server?

Who is Participating?