In this article I will explain with an example, how to enable or disable HTML Anchor Links (HyperLink) using JavaScript and jQuery.
The HTML disabled attribute does not work for HTML Anchor Tags (HyperLink) and they are still clickable.
Enable Disable Anchor Tags (Links) usingJavaScript
The following HTML Markup consists of three HTML Anchor Links (HyperLink) and a Button. When the Button is clicked, the EnableDisableLinks JavaScript function is executed.
Inside the function, the value of the clicked Button is checked and if the Button’s value is Disable, then the HTML Anchor Links (HyperLink) are disabled i.e. non-clickable and if the Button’s value is Enable, then the HTML Anchor Links (HyperLink) are enabled i.e. clickable.
Disabling HTML Anchor Links (HyperLink)
In order to disable a HTML Anchor Link (HyperLink), the value of its HREF attribute is copied to the REL attribute and the value of HREF attribute is set to an empty JavaScript function.
This makes the HTML Anchor Link (HyperLink) disabled i.e. non-clickable.
Enabling HTML Anchor Links (HyperLink)
In order to enable a HTML Anchor Link (HyperLink), the value of its REL attribute is copied back to the HREF attribute and the REL attribute is removed.
This makes the HTML Anchor Link (HyperLink) once again enabled i.e. clickable.
<a href="http://www.aspsnippets.com">Visit aspsnippets.com</a><br />
<a href="http://www.aspforums.net">Visit aspforums.net</a><br />
<a href="http://www.jqueryfaqs.com">Visit jqueryfaqs.com</a>
<hr />
<input type="button" id="btnEnableDisable" value="Disable" onclick = "EnableDisableLinks(this)" />
<script type="text/javascript">
function EnableDisableLinks(btn) {
var links = document.getElementsByTagName("a");
if (btn.value == "Disable") {
btn.value = "Enable";
for (var i = 0; i < links.length; i++) {
var href = links[i].href;
links[i].setAttribute("rel", href);
links[i].href = "javascript:;"
}
} else {
btn.value = "Disable";
for (var i = 0; i < links.length; i++) {
var href = links[i].getAttribute("rel");
links[i].removeAttribute("rel");
links[i].href = href
}
}
}
</script>
Enable Disable Anchor Tags (Links) using jQuery
The following HTML Markup consists of three HTML Anchor Links (HyperLink) and a Button. When the Button is clicked, a jQuery Click event handler is executed.
Inside this Click event handler, the value of the clicked Button is checked and if the Button’s value is Disable, then the HTML Anchor Links (HyperLink) are disabled i.e. non-clickable and if the Button’s value is Enable, then the HTML Anchor Links (HyperLink) are enabled i.e. clickable.
Disabling HTML Anchor Links (HyperLink)
In order to disable a HTML Anchor Link (HyperLink), the value of its HREF attribute is copied to the REL attribute and the value of HREF attribute is set to an empty JavaScript function.
This makes the HTML Anchor Link (HyperLink) disabled i.e. non-clickable.
Enabling HTML Anchor Links (HyperLink)
In order to enable a HTML Anchor Link (HyperLink), the value of its REL attribute is copied back to the HREF attribute and the REL attribute is removed.
This makes the HTML Anchor Link (HyperLink) once again enabled i.e. clickable.
<a href="http://www.aspsnippets.com">Visit aspsnippets.com</a><br />
<a href="http://www.aspforums.net">Visit aspforums.net</a><br />
<a href="http://www.jqueryfaqs.com">Visit jqueryfaqs.com</a>
<hr />
<input type="button" id="btnEnableDisable" value="Disable" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnEnableDisable").click(function () {
if ($(this).val() == "Disable") {
$(this).val("Enable");
$("a").each(function () {
$(this).attr("rel", $(this).attr("href"));
$(this).attr("href", "javascript:;");
});
} else {
$(this).val("Disable");
$("a").each(function () {
$(this).attr("href", $(this).attr("rel"));
$(this).removeAttr("rel");
});
}
});
});
</script>
Screenshot
![Enable Disable Anchor Tags (Links) using JavaScript and jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
