ASP.NET linkbutton enabled=false does not work in Firefox

Question

I want to disable an ASP.NET linkbutton . What I want is a solution where browsers won't let me click on the linkbutton or at least where the associated action is not executed.

I do the following on the HTML markup using WebForms :

 <asp:LinkButton
       id="link1"
       text="Some button"
       runat="server"
       Enabled ="false"
 />

I trigger the link button action using jQuery events:

$('#link1').click(function (evt) {
    // Do something here
    return false;
});

• In IE8 it is disabled and does not allow click
• In Chrome it's not disabled but id does not allow click
• In Firefox 41.0.1 I can still click the link button and perform the action

The result is the same if I disable it in code behind:

this.link1.Enabled = false;

Answer 1

It's not clear whether it's been missed in your simplification but it seems that your jQuery would not be executed due to a change in the button's client side ID. You will need to do either of the following:

Set ClientIDMode to static on your control ...

To ensure that the id remains as link1 for use in your client side code.

<asp:LinkButton
    id="link1"
    text="Some button"
    runat="server"
    Enabled ="false"
    ClientIDMode="static"
    />

or, obtaining the ID of the your control in your jQuery at runtime ...

Although this will only work if your jQuery is within the same web form page, not external JS.

$('#<%= link1.ClientID %>').click(function (evt) {
    // Do something here
    return false;
});

Whichever you choose ...

If it correctly linked, you can then use jQuery's preventDefault() method to disable the post back from triggering.

$('#link1').click(function (evt) {
    evt.preventDefault();
    // Do something here
});

Answer 2

Making a Linkbutton disabled does not prevent it from being clicked. In my test a disabled linkbutton rendered like this:

<a class="aspNetDisabled">test</a>

jQuery will happily attach a click event to that anchor tag. You need to either prevent the event from triggering, or change the code so that it only performs your actions when the button is enabled.

Here's a possible work-around which will only execute your js if the button is enabled:

$('#link1').click(function (evt) {
    if('<%=link1.Enabled%>' === 'True') {
      // Do something here
    }
    return false;
});

Even if the client triggers the disabled button, the if statement will cause Do something here to not run.