Enable Disable Anchor Tags (Links)

Introduction

In this blog, I will explain with an example, how to enable or disable HTML Anchor Links (HyperLink), using JavaScript and jQuery.

HTML disabled attribute does not work for HTML anchor tags (HyperLink) and they are still clickable.

Enable Disable Anchor Tags (Links) using JavaScript

HTML consists of three HTML Anchor Links (HyperLink) and a button. When the button is clicked, EnableDisableLinks JavaScript function is executed.

Inside the function, the value of the clicked button is checked and if the button’s value is disabled, HTML Anchor Links (HyperLink) are disabled i.e. non-clickable and if the button’s value is enabled, HTML Anchor Links (HyperLink) are enabled i.e. clickable.

Disabling HTML Anchor Links (HyperLink)

In order to disable an 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 HTML Anchor Link (HyperLink) disabled i.e. non-clickable.

Enabling HTML Anchor Links (HyperLink)

In order to enable an 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 HTML Anchor Link (HyperLink) once again enabled i.e. clickable.

<a href="http://facebook.com/">Visit Facebook</a><br /> <a href="http://google.co.in/">Visit Google</a><br />
<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

HTML consists of three HTML Anchor Links (HyperLink) and a button. When the button is clicked, click event handler is executed in jQuery.

Inside this click event handler, the value of the clicked button is checked and if the button’s value is disabled, HTML Anchor Links (HyperLink) are disabled i.e. non-clickable and if the button’s value is enabled, HTML Anchor Links (HyperLink) are enabled i.e. clickable.

Disabling HTML Anchor Links (HyperLink)

In order to disable 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 HTML Anchor Link (HyperLink) disabled i.e. non-clickable.

Enabling HTML Anchor Links (HyperLink)

In order to enable HTML Anchor Link (HyperLink), the value of its REL attribute is copied back to the HREF attribute and REL attribute is removed.

This makes HTML Anchor Link (HyperLink) once again enabled i.e. clickable.

<a href="http://facebook.com/">Visit Facebook</a><br /> <a href="http://google.co.in/">Visit Google</a><br />
<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>

The output will look like, as shown below-

Summary

In this blog, we learned how to enable or disable HTML Anchor Links (HyperLink), using JavaScript and jQuery.