Disabled the a tag (link) by using javascript

Question

Does anyone how can I disabled the a tag (link) by 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 disabled this a tag after a button been clicked.

Answer 1

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

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

Then to reenable it:

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

Answer 2

Use an onclick="this.onclick=function(){return false}" attribute on the a tag. If there's a lot of buttons, you should iterate through them in a JavaScript script that adds an event listener for click that is a function that returns false.

Answer 3

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's 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 an 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 4

Remove the attribute href like:

<a>Edit</a>

Answer 5

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

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

Answer 6

You can use jquery

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

Answer 7

You can do it like this:

<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 make links work only javascript is enabled. In other words, links are disabled by default.

Answer 8

The "disabled" attribute does not stop click on a tags. But I had a A tag designed has a button, and at least, adding "disabled": true the button was styled has a real disabled button.

Now if you want to stop the click you can simply use the css property "pointer-events: none"

So you can use something like this :

$('.sub-heading a').attr("disabled", "true");
$('.sub-heading a').css('pointer-events', 'none');

And it will do the trick ;)

If you want to do it through clicking on other button :

jQuery('.my-other-button').on('click', function() {
    $('.sub-heading a').attr("disabled", "true");
    $('.sub-heading a').css('pointer-events', 'none');
});

Answer 9

• In CSS set pointer-events to none. That is :

  pointer-events: none;

• Then using DOM in javascript, change it however you want like fill, painted, stroke, visible... (Here change it to none)