Introduction: Hello Guys, “Welcome back” Today, I am here with another one new great article. In this article I explained the implementation about how to enable or disable Link (HyperLink) using JavaScript and jQuery. The HTML disabled attribute does not work for HTML Anchor Tags (HyperLink) and they are still clickable.
Join our Channel on Whtsapp and Telagram for All Updates
Enable Disable Anchor Tags (Links) usingJavaScript
ON the HTML page i placed a HTML Anchor Links (HyperLink) or Anchor tag with the website link and a Button. On the Button is click, the enable_disable_links JavaScript function will be called.
In the function, the values of Button will be checked after click if the value the button will be Disable, then the Anchor Tag or Link will be disabled i.e. non-clickable if the value the button will be Enable, then the Anchor Tag or Link will be disabled 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. You can copy and paste this code inside the body tag of the HTML page.
<a href=" https://usingaspdotnet.blogspot.com ">Visit Programming Hub</a><br />
<input type="button" id="btn_Enb_dis " value="Disable" onclick = "enable_disable_links (this)" />
<script type="text/javascript">
function enable_disable_links(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
ON the HTML page i placed a HTML Anchor Links (HyperLink) or Anchor tag with the website link and a Button. On the Button is click, the jQuery Click event handler will be executed.
In Click event handler, the values of Button will be checked after click if the value the button will be Disable, then the Anchor Tag or Link will be disabled i.e. non-clickable if the value the button will be Enable, then the Anchor Tag or Link will be disabled 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. You can copy and paste this code inside the body tag of the HTML page.
<a href=" https://usingaspdotnet.blogspot.com ">Visit Programming Hub</a><br />
<hr />
<input type="button" id="btn_Enb_dis" 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 () {
$("#btn_Enb_dis").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>
Conclusion: In above code, I have been explained that how to enable or disable Link (HyperLink) using JavaScript and jQuery. Bye and take care of yourself Developers. We will come back shortly with the new article.
Regards
Programming Hub
