Disable an asp.net LinkButton (or HyperLink) without graying it out

I have a web form with a couple of linkbuttons. The linkbuttons serve as tab selectors, clicking one will activate an associated panel. When a panel is selected I don’t want the user to select it again, clicking the linkbutton would be an unnecessary roundtrip. I can set the button’s enabled property to false but the now the button will be grayed out. But this does not fit the user’s impression of having precisely selected that tab.


Many asp.net controls have the AutoPostback property to disable an unintended postback. A linkbutton does not. But there is a very simple way to knock out postback with a snippet of script. This code does exactly what I want


LinkButton1.Attributes["OnClick"] = “return false;”;
LinkButton1.CssClass = “HighlitedTab”;
 

It sets the clientside click handler to the JavaScript statement return false; Which cancels postback. The appearance of the linkbutton is changed by setting its CSS class, so the user is informed about the status of the button. Both the attributes and the cssclass are included in the linkbutton’s viewstate. To restore the control’s original state on the next roundtrip you need to reset it from code or disable the control’s viewstate.


This also works for a hyperlink. But I do not see a meaningful use for it there. Yet.

This entry was posted in ASP.NET. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • Skgpt51

    skl;cdv

  • Skgpt51

    jajajajaj

  • Skgpt51

    hello……..

  • Skgpt51

    hi 9ji 

  • Skgpt51

    fdhjd fis d

  • Skgpt51

    ddf

  • Skgpt51

    jg jfogfghu gfoh

  • Hzgt9b

    Te problem with this is that the hyperlink is still active and users can right-click to follow the link.

  • Angel

    Awesome trick..I was just looking for this..Thanks!

  • http://codecorner.galanter.net Yuriy

    Sometimes you need to disable clicking on a block of links at once (e.g. if links are in table cells for example) while simultaneously allowing clicks on other elements. Here’s a simple solution: http://codecorner.galanter.net/2010/07/08/how-todisable-hyperlink-clicks/

  • sipora

    Thanks alot, that was great.

  • Iman

    May Allah bless you,

    A geninus simple solution. :)

    Thanks.

  • Antonio

    Grazie, quello che mi serviva

  • http://codebetter.com/members/pvanooijen/default.aspx pvanooijen

    David : A linkbutton presents itself as a hyperlink in the browser. But a hyperlink cannot present itself as a linkbutton server-side. So imho you miss the point.

    In the original post there is no post-back for a disabled linkbutton. So why bother.

    BTW, the original post is from the pre-jquery pre-AJAZ ASP.NET 2.0 days.

  • David Rose

    You can use a hyperlink and achieve no postback by simply setting the href=”#” on the link!

    Then fire some javascript on the onclick or like i did attach a .click event through jquery.

    Show it

    Good Luck

  • Sunil

    Good post, after an hour long gooling could figure this out!!

  • Gary B

    This was perfect for me for cross-browser support, a.k.a “making the damn thing work for IE”

    Cheers

  • xinóman

    thank you madafaka

  • http://www.GamalEmara.com Gamal Emara

    Great post!

    This is exactly what I was looking for!

  • Tony C

    Thanks – I was wondering about this – I got it the first time . I found that simply putting return false just after the clientclick methos that I called e.g., onclick=”javascript:amethod(); return false;” works perfectly

    Again – many thanks I can now get out of the office

    :)

  • http://codebetter.com/blogs/peter.van.ooijen/ pvanooijen

    Don’t set the attribute on th enext roundtrip ?

  • matthew

    Ok, so how do you re-enable the linkbutton? I need to have it hooked up to a server-side function, which you cannot assign with attributes["onclick"]

  • John H

    Cheers mate! Lucky for me I managed to find this page quite quickly…

  • http://codebetter.com/blogs/peter.van.ooijen/ pvanooijen

    mmm, pagelifecycle hell..

    Perhaps a final check in the prerender event ?

  • Akhil Raj

    hi,
    nice post. i am searching for this only.
    But please help something more.
    I used the link button in the grid view only. and i checked some condition in the rowdatabound event and put aboove code. its working fine. but the first time the link button shows the default behaviour. like cursor underline etc.

  • Zephyr

    Thanks, It help me a lot!

  • http://www.corvetteexcitement.com John Brady

    Check it out!!

  • ranjith

    Thanks man……… Perfect this is the one i am looking at.

  • de Shan Baptiste

    umm…hint good…me steal..

  • Ethan

    Thanks for the hint!

    Also, to anyone else using this hint, you’ll probably want to similarly disable the “OnRightClick” attribute.

  • http://codebetter.com/blogs/peter.van.ooijen/ pvanooijen

    That’s a hyperlink and not a linkbutton. A linkbutton looks like a hyperlink but is usually intended to execute soem code on the same page, in it’s onclick.

  • http://www.nickbouton.com nick bouton

    for an tag, you can just set .NavigateUrl = null and that’ll disable it without graying it out.

  • http://codebetter.com/blogs/peter.van.ooijen/ pvanooijen

    There are a thousand ways to do it. But I prefer setting one attribute serverside over fiddling with three attributes client side. Besides that, your third line does exactly the same as my server side code..

  • Abhishek

    However same thing can also be acheived through javascript. We have only remove attributes as like:

    LinkControl.removeAttribute(‘href’);
    LinkControl.removeAttribute(‘className’);
    LinkControl.setAttribute(‘onclick’,'return false;’);

  • http://codebetter.com/blogs/peter.van.ooijen/ pvanooijen

    I don’t think so, as that doesn’t cancel the postback,.

  • Monkiz

    I think you can event try this…
    Event more simplier

    LinkButton1.Attributes["href"] = “#”;

  • toy

    nice post

  • Silversoth

    Thanks a bunch, I was having the same problem with wanting to disable a button without having to gray it out with enable=false :D

  • http://codebetter.com/blogs/peter.van.ooijen/ pvanooijen

    My first reaction : don’t. It is very confusing for the user, clicking something which just doesn’t work.

    My second reaction, you could try the cssclass to change the appearence. But I’m not shure wheteher that will work.

  • Rajendra

    Hi
    I want to disable the linkbutton without change the color of the linkbutton what to do?

  • http://codebetter.com/blogs/peter.van.ooijen/ pvanooijen

    What does MyFunction do ? Strike that, return false is enough.

  • jtg72

    hi, I think I’m missing something. This solution would fix my problem, but when I add this code and click one of my linkbuttons either the postback still fires, or nothing happens at all.

    Here is the code in the .aspx page prior to rendering:

    Here is the code in the code behind:

    private void tab2Select_Click(object sender, System.EventArgs e)
    {
    pnlRecipes.Visible = false;
    pnlHeadlines.Visible = true;

    }
    Here is the code rendered as HTML:

    Here is the javascript function:

    function MyFunction()
    {
    //does nothing

    }

    Any suggestions??
    thanks.

  • T Arthanathan

    Simple! Yet a great solution!

  • David M

    Perfect! This is what I needed.

  • Iva

    Click…

  • Gino

    Thanx :)

  • Adriano

    Thanks, I was grateful in find your post.

  • Thomas

    Excellent, this was exactly what I was looking for, and for the exact same reason that you needed it. Took me more googling than I expected to find an answer to this.

    Thanks!

  • http://codebetter.com/blogs/peter.van.ooijen/ pvanooijen

    I’m not saying the enabled property does not work. My problem with it is the visual, greyed out, appearance of a disabled link to the user. In my case I almost want to highlight the linkbutton as it represents the choice the user has made. It is un desired to make that same choice again.

  • Pancha

    Please see this script. The ‘Enabled’ property is working fine both for Linkbutton and Hyperlink(in all browsers). Why don’t you use it? Even the book says it won’t work with Netsacpe?



    HyperLink:

    LinkButton:



  • Ramesh Venkataswamy

    Thanks for your posting.

    We tried with visible=false. The drawback with that is the text gets bold by itself and it was not consistent with the design.

    The css works fine as mentioned by you.