In this article I will explain how to make HTML Anchor Links (HyperLink) non-clickable or disabled using jQuery.
The HTML disabled attribute does not work for HTML Anchor Links (HyperLink) and they are still clickable.
Make HTML Anchor Links (HyperLink) non-clickable or disabled 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
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads