Disabling LinkButton doesn't disable the click event in javascript

Question

I want to disable a LinkButton clink on the client site.

objLinkButton.disabled = true;
// or 
objLinkButton.disabled = -1;

This disables the link but I am still able to click on the link and do PostBack.

Is there any way I can disable the link.

Code:

<asp:linkbutton id="xyz" runat="server"
                onClick="javascript:LinkDisable(this)" ></asp:linkbutton>

which renders as a link which does a postback... I am opening the page on postback in a new window. What I want to do is.. when I click on the link for the firsttime.. it will open a new page and then it will disable the link.

what I am doing is .. onClick of that link I have a javascript function.. which is something like this..

In LinkDisable ...

function LinkDisable(obj)
{
obj.disabled = -1;
obj.href = '#';
//Cant return false from here.. otherwise it wont postback...
}

When I do this.. the link gets grey's out ... but I am still able to click it. I want to stop the user from clicking it the second time.

Any help is appreciated.

Answer 1

This is an edit based on the comment you posted to allow the linkbutton to be followed through on the first click but not otherwise.

To allow the link to be clicked the first time, but not after that, create a variable on the page to keep track of the click.

var clicked = 0;

Since linkbuttons produce hrefs on the front end, you could do this

<a href="#" OnClientClick="return false"></a>

OnClientClick is specific to .NET

If you want to do it after the page loads in certain situations only:

<a href="" id="linkbutton">

var linkbutton = document.getElementById("linkbutton");
linkbutton.onclick = function(){
   if(clicked != 0){
      //if other than 0, not followed
      return false;
   }
   else{
      //link is followed here since it's the first time it's being clicked and clicked value = 0
      clicked = clicked + 1;
   }
}

Answer 2

Using jQuery you can do this in a browser-independent either by replacing the href or by adding a click handler that preempts and stops the link being followed.

$('#objLinkButton').attr('href','#').addClass('disabled-link');

or

$('#objLinkButton').click( function() { return false; } )
                   .addClass('disabled-link');

Where the disabled-link class has some CSS to change the look of the link so that it looks disabled visually.

Note that if this if the control is inside a naming container (like a GridView or UserControl), you'll have to reference the name using the "ending with" selector on the id.

$('id$="objLinkButton"')...

EDIT: Based on your update. Try this:

var code = null;
$(document).ready( function() {
    var button = $('#objLinkButton');
    code = button.attr('href').replace(/javascript:/,''); // save postback function
    button.attr('href','#'); // replace postback function
    button.click( function() {
        $(this).unbind('click'); // get rid of click handler so it only fires once
        if (code) { // if link hasn't been used
            eval(code);  // do post back
        }
    });
});

Answer 3

The simplest way to disable a link (and render it like normal text) without using jQuery is to remove it's href attribute entirely.

For example here is the rendered link:

<a id='link1' href="javascript:disableLink('link1');">Click me</a>

And the required JavaScript:

function disableLink(id) {
   document.all[id].removeAttribute('href');
}

This works for me in both IE and Firefox, but you may wish to do some more extensive testing.

Answer 4

Found the Solution guys... these javascript solution will work but if you refresh the page... it will clear the varaibles.

So thats a bug right there..

Found the solution using "userData" ... IE Session data... it really cool.

Checkout this link:http://www.eggheadcafe.com/articles/20010615.asp