Enable/Disable a .NET 4.0 button with jQuery

Question

I'm trying to enable a .net LinkButton with jQuery but things have changed a little in .NET 4.0 and simply using attr("disabled", "disabled") or removeAttr("disabled") won't work.

Here is the button.

<asp:LinkButton ID="LinkButtonContinue" runat="server" Text="Continue" CssClass="button continue" Enabled="false"></asp:LinkButton>

This renders out like this:

<a class="aspNetDisabled button continue" id="ContentPlaceHolder1_LinkButtonContinue">Continue</a>

Note the newly added class of aspNetDisabled.

So I tried this:

jQuery(".continue").removeAttr("disabled").removeClass("aspNetDisabled");

and this:

jQuery(".continue").removeClass("aspNetDisabled");

Neither work because there is no disabled attribute to remove so I assume it uses JS to disable it?

How would I go about enabling a button with this class?

Any ideas?

Many thanks

Chris

try this: $('.continue').attr("disabled", true);

Ashwini Verma
– Ashwini Verma

2012-10-11 08:29:27 +00:00
Commented Oct 11, 2012 at 8:29 — Ashwini Verma
– Ashwini Verma, Commented Oct 11, 2012 at 8:29

Zac · Accepted Answer · 2012-10-11 09:02:27Z

2

I think the problem is, when you have a button like that generated serverside, the page gets some javascript nonsense put onto it, e.g.:

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

And the button will have something like javascript:__doPostBack('id','') on the href

I think you should try manually defining this href value serverside (or dynamically with javascript on page load, might be easier with the horrible id that gets generated).

In your instance, there is no href so nothing happens even if the anchor is not disabled.

Edit: Would it not just be easier to avoid disabling the button serverside, and disable it with javascript when the page loads?

edited Oct 11, 2012 at 9:02

answered Oct 11, 2012 at 8:43

Zac

1,7521 gold badge19 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Zac Over a year ago

I'm working on the assumption that you want to do a postback in which case you need to manually submit the form. You may or may not need to define the javascript to submit this form, depending on if you have any other buttons on your page that are enabled serverside.

Chris Spittles Over a year ago

Basically, the page served up by the server has a submit button that is initially disabled. Once the user has successfully completed the section, the button will become enabled and the user can click the button to progress.

Zac Over a year ago

I'd say just enable the button serverside, and disable it client-side when the page loads. Or, as above, make sure your page has href attribute calling the horrible postback method via javascript. That javascript code is automatically added to the page if you have an enabled asp button, but if you don't then you'd need to add it manually in the markup. Make sense?

b_meyer · Accepted Answer · 2012-10-11 08:32:54Z

1

Maybe that works for you:

$('.continue').disabled = false;

Another way that can also be used would be:

$('.continue').attr("disabled", "");

answered Oct 11, 2012 at 8:32

b_meyer

6043 silver badges7 bronze badges

2 Comments

middelpat Over a year ago

according to our comments beneath my answer you can see we've already tried this.

b_meyer Over a year ago

mea culpa for the first snippet, but the second snippet was not mentioned so i thought it could be useful

middelpat · Accepted Answer · 2012-10-11 08:13:07Z

0

Using just:

$('.continue').removeClass("aspNetDisabled");

Should work i guess

answered Oct 11, 2012 at 8:13

middelpat

2,5851 gold badge22 silver badges29 bronze badges

2 Comments

Chris Spittles Over a year ago

Thanks for the fast response. I've tried that but the button remains disabled even when the class is removed.

middelpat Over a year ago

I'm also guessing javascript disables the button. Have you tried adding a attribute of enabled="true" or disabled="false"? i don't know if it'll work. Just sharing my thoughts

Amitd · Accepted Answer · 2012-10-11 08:35:29Z

0

Try something like this..

<head id="Head1" runat="server">
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

    <style type="text/css">
        .disabled-link
        {
            color: Gray;
            cursor: default;
        }
    </style>

    <script type="text/javascript">

        $(function() {
            var linkButton1 = $('.continue'); // $('#<%= LinkButton1.ClientID %>')
            var href = linkButton1.attr('href');
            $('#<%= EnableButton.ClientID %>').click(function(e) {
                e.preventDefault();
                linkButton1.attr('href', linkButton1.attr('myCustomAttr')).removeClass('disabled-link');
            });

            $('#<%= DisableButton.ClientID %>').click(function(e) {
                e.preventDefault();
                linkButton1.attr('href', '#').attr('myCustomAttr', href).addClass('disabled-link');

            });
        });

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:LinkButton ID="LinkButton1" runat="server"  CssClass="button continue" PostBackUrl="test.aspx">LinkButton</asp:LinkButton>
    <br />
    <asp:Button ID="DisableButton" runat="server" Text="Disable" />
    <asp:Button ID="EnableButton" runat="server" Text="Enable" />
    </form>
</body>

answered Oct 11, 2012 at 8:35

Amitd

4,8598 gold badges58 silver badges84 bronze badges

2 Comments

Chris Spittles Over a year ago

Thanks but your method requires me to use 2 buttons to do the job of 1. I'm sure there must be a way.

Amitd Over a year ago

buttons were just to show the functionality..you can always use some state variable on client side to toggle the behaviour?

Collectives™ on Stack Overflow

Enable/Disable a .NET 4.0 button with jQuery

4 Answers 4

3 Comments

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related