tags:

views:

2982

answers:

4

I want to disable link button after clicking of it & other enable. toggle enable/ disable between both link buttons using javascript

<a id="a1" href="page1.aspx">One</a><a id="a2" href="page2.aspx">Two</a>
A: 

You can access and set the "disabled" attribute like this:

if(somebutton.disabled == true){
  somebutton.disabled = false;
}

I recommend using a JavaScript framework like jQuery.

Lennart
There's no "disabled" attribute for links and this does not work.
A: 

Simple, just add listeners to the onclick events on both links, that disable the link in question and enable the other one.

Something like

document.getElementById('a1').onclick = function() {
   document.getElementById('a1').disabled = true;
   document.getElementById('a2').disabled = false;
};

document.getElementById('a2').onclick = function() {
   document.getElementById('a2').disabled = true;
   document.getElementById('a1').disabled = false;
};

Of course if you're going to be extending this to multiple buttons then you could easily abstract the above out to registration methods, looping over arrays of buttons etc. (possibly those that implement a particular class rather than explicitly specifying the array).

Andrzej Doyle
can we do it using any property or css.
Yogini
+1  A: 

Your question can have any one of the following 3 possible scenario. Choose whichever suites your problem.

Case1) A catch in your question is that since they are links pointing to page1.aspx and page2.aspx respectively once you click on a link a new page loads in the browser. So the effect you want to achieve doesn't really matter.

Case 2) If, you have both the links 'One' and 'Two' on each of aspx pages then you can as well hardcode the disabling of the link pointing to itself. (Or as well not have the link at all).

Case 3) If you have a frame to display the links 'One', 'Two' and you have a another frame to load content of both links then your question has a meaning disabling the other link. Here is the code for the same.

 <html>
<a id="a1" href="javascript:void(0)" onclick="toggle(objA1,objA2,'page1.aspx')">One</a>
<a id="a2" href="javascript:void(0)"  onclick="toggle(objA2,objA1,'page2.aspx')">Two</a>
<br><iframe id="ifrm" src=""></iframe>

<script>
    var objA1 = document.getElementById('a1');
    var objA2 = document.getElementById('a2');

    // d=element to disable, e=element to enable 
    function toggle(d,e,link)
    {
     //if already disabled do nothing(don't follow url)
     if(d.disabled) return; 

     //enable/disable
     d.disabled = true;
     d.style.cursor = 'default';
     e.disabled = false;
     e.style.cursor = 'hand';

     //follow link
     ifrm.src = link;
    }
</script>
</html>
Chandan .
A: 

Hello,

The simplest way is to hide the link rather than to make it disabled.

You can use this code to hide the link after click on it.

Its teste code & it works perfect. :-)

<script type="text/javascript">
    onclick = function() {
        var chk= document.getElementById('myElementId');
        chk.style.display="none"; 
    };
</script>
Muhammad Sajid