Disabled the a tag (link) by using javascript

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.开发者_如何学JAVA

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';

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.

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');
   } 
 }

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

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

You can use jquery

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

Remove the attribute href like:

<a>Edit</a>

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.

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');
});

• 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)