0

I have 5(say) links inside a <div> tag in a php page. When a visitor clicks on any one of the links all the 5 has to be disabled. How to make this possible? I have some idea to make the link disabled on which the user clicks

<a href="someaction" onClick='this.disabled=true;'>LINK 1</a>
<a href="someaction" onClick='this.disabled=true;'>LINK 2</a>
<a href="someaction" onClick='this.disabled=true;'>LINK 3</a>
<a href="someaction" onClick='this.disabled=true;'>LINK 4</a>
<a href="someaction" onClick='this.disabled=true;'>LINK 5</a>

So if I click LINK 1 only the LINK 1 will be disabled. I need to disable all the 5 links (only these five not the other links in the page).

Suggest me simple and best way :)

1
  • And what when a user reloads the page? Should the links be again clickable?
    – shadyyx
    May 10, 2012 at 16:13

3 Answers 3

3

<a> tag doesn't support disabled attribute, only input, textarea, button does.

If you want to make link non clickable you can null href attribute:

<a href="someaction" onClick='this.href="";'>LINK 5</a>

Or you can emulate disabled attribute:

<a href="someaction" onClick='if(this.disabled){ return false; } else { this.disabled = true; }'>LINK 5</a>

It will prevent future clicks.

2
  • Oops!! okay is there any possibility to disable all the links when any link is clicked? May 10, 2012 at 14:54
  • okay!! changed the idea let me use 5 buttons over there. is there any possibility to disable all the 5 buttons when any pne clicked? May 10, 2012 at 14:58
1

Not Sure if it is the best way, but certainly, it'll do the job.

function removeLink(id){
    document.getElementById(id).innerHTML = 'LINK 1<br />LINK 2<br />LINK 3<br />LINK 4<br />LINK 5<br />';

}

<span id="removeLinkId">
    <a href="someaction" onClick="removeLinks('removeLinkId');">LINK 1</a>
    <a href="someaction" onClick="removeLinks('removeLinkId');">LINK 2</a>
    <a href="someaction" onClick="removeLinks('removeLinkId');">LINK 3</a>
    <a href="someaction" onClick="removeLinks('removeLinkId');">LINK 4</a>
    <a href="someaction" onClick="removeLinks('removeLinkId');">LINK 5</a>
</span>
2
  • I don't like this approach very much... The one from @antyrat is much better and simpler.
    – shadyyx
    May 10, 2012 at 16:14
  • Me neither. But as of now, it is working for all 5 links. This case is somewhat unusual.
    – J A
    May 10, 2012 at 16:21
0

HTML:

<a href="www.google.se" id="foo">LINK 1</a>

Javascript:

//Get the element you need.
var a = getElementById("foo");

//Remember to use the REFERENCE, not actually CALLING the callback.
a.onclick = callback;

function callback() {
    //a.setAttribute("style", "display:none;");
    a.removeAttribute("href");
    return false; //Stop the event (don't navigate
}

Javascript JQUERY:

//Get the element and bind it in one "line".
var a = $("a#foo);
a.bind(
    "click",
    function() {

        a.hide();
        a.removeAttr("href");

        //Stop the event from bubbling
        return false; 
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.