Disabled tag (link) using javascript

Question

Anyone how can I disable a tag (link) using javascript?

Example:

<div class="sub-heading"> Contact Details &nbsp; &nbsp; &nbsp; <a href="./cust_add_edit_customer.php?action=edit_customer_details&amp;cust_code=12761"> <img class="imgVA editIconPad" src="../images/edit0.gif" alt="Edit Contact Details" border="0" width="20" height="17"> </a> </div> 

I hope to disable this tag after clicking the button.

Answer 1

I think the most user-friendly approach is to hide the link. In the click handler, click:

 document.getElementById('anchorID').style.visibility = 'hidden'; 

Then to reuse it:

 document.getElementById('anchorID').style.visibility = 'visible'; 

Answer 2

Use the onclick="this.onclick=function(){return false}" attribute in the a tag. If there are many buttons, you should iterate over them in a JavaScript script that adds an event listener for click , which is a function that returns false.

Answer 3

Add the id attribute to the tag a you want to disable, then:

 document.getElementById('the_id').href = '#'; 

Answer 4

Hai

 function disableAnchor(obj, disable) { if (disable) { var href = obj.getAttribute("href"); if (href && href != "" && href != null) { obj.setAttribute('href_bak', href); } obj.removeAttribute('href'); obj.style.color="gray"; } else { obj.setAttribute('href', obj.attributes['href_bak'].nodeValue); obj.style.color="blue"; } } 

or

 var Link_Enabled_Flag = false; // disable links - background process changes this to true when it done function Check_Link_Enabled(){ return Link_Enabled_Flag; } <a href="wherever.com" onclick="return Check_Link_Enabled()"></a> 

or

IE and Firefox compatible javascript to enable or disable the anchor tag

 onclick="disableAnchor(this,'verify')" function disableAnchor(Check_Obj, Check_Id){ var Anchor_id = 's'; thisCheckbox = document.getElementById(Check_Id); thisAnchor = document.getElementById(Anchor_id); if(thisCheckbox.checked){ //alert('Y1'); Check_Obj.setAttribute('href',''); //Check_Obj.attributes['href_bak'].nodeValue Check_Obj.style.color="blue"; //alert('Y2'); } else{ //alert('N1'); var href = Check_Obj.getAttribute('href'); //alert(href); if(href && href != "" && href != null){ Check_Obj.setAttribute('href_bak', href); } Check_Obj.removeAttribute('href'); Check_Obj.style.color="gray"; //alert('N2'); } } 

Answer 5

You can use jquery

  $('sub-heading').attr("disabled", "true"); 

Answer 6

Remove the href attribute as:

 <a>Edit</a> 

Answer 7

You can do it as follows:

 <a href="javascript:if (links_enabled) document.location='www.example.com';">enabled or disabled link</a> <br/> <a href="javascript:links_enabled = true;">enable link</a> <br/> <a href="javascript:links_enabled = !links_enabled;">toggle link</a> 

I find this very elegant and it will also work with javascript links only. In other words, links are disabled by default.

Answer 8

Also you can do it ...

 <a style="cursor:Default; text-decoration:none; color:inherit;">.....</a>