Disable Href After 1 Click On Html?

I want the href to be disabled after 1 click, can it be done using javascript or jquery? Please help.

Solution 1:

Pure javascript solution:

<script> 
   function clickAndDisable(link) {
     // disable subsequent clicks
     link.onclick = function(event) {
        event.preventDefault();
     }
   }   
</script>
<a href="target.html" onclick="clickAndDisable(this);">Click here</a>

Solution 2:

This is simpler approach using jQuery that prevents links double clicking: no onclick attributes, id isn't required, no href removing.

$("a").click(function (event) {
    if ($(this).hasClass("disabled")) {
        event.preventDefault();
    }
    $(this).addClass("disabled");
});

Tip: you can use any selector (like button, input[type='submit'], etc.) and it will work.

Solution 3:

just try this....

a:visited {
 color:green;
 pointer-events: none;
 cursor: default; 
}

Solution 4:

Pure JavaScript solution to allow user to follow the URL only once:

<a id="elementId" 
   href="www.example.com" 
   onclick="setTimeout(function(){document.getElementById('elementId').removeAttribute('href');}, 1);"
   >Clik and forget</a>

Once clicked, this will remove the href attribute (with 1 ms wait to allow the original action to start) making the link silent. Similar as suggested by Dineshkani, but the original answer caused action to not to start at all on some browsers.

Solution 5:

this time i tried it with Javascript... hope it will help u:) just call the below function in "onclick()" of the required href tags...

​function check(link) {
    if (link.className != "visited") {
       //alert("new");
       link.className = "visited";
       return true;     
    }
    //alert("old");
    return false;
}​​

like ​<a href="#" onclick="return check(this);">link here</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ and see demo here

Share