Advertisements
How to remove the clickable behavior from a disabled link using jQuery
Topic: JavaScript / jQueryPrev|Next
Answer: Use the jQuery removeAttr() method
You can easily remove the clickable behavior from a link through removing the href attribute from the anchor element (<a>) using the jQuery removeAttr() method.
The following example demonstrates how to remove the clickable behavior from the hyperlinks having the class .disabled using jQuery. Let's try it out and see how it basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Removing Clickable Behavior</title>
<style>
.menu a{
margin-left: 20px;
}
.menu a.disabled{
color: #666;
text-decoration: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".menu a").each(function(){
if($(this).hasClass("disabled")){
$(this).removeAttr("href");
}
});
});
</script>
</head>
<body>
<div class="menu">
<a href="https://www.tutorialrepublic.com/html-tutorial/">HTML</a>
<a href="https://www.tutorialrepublic.com/css-tutorial/">CSS</a>
<a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/">Bootstrap</a>
<a href="https://www.tutorialrepublic.com/codelab.php" class="disabled">CodeLab</a>
</div>
<p><strong>Note:</strong> In this example any link inside the "menu" element with the class "disabled" will not be clickable.<p>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
- How to remove attribute from an HTML element in jQuery
- How to change href attribute of a hyperlink using jQuery
- How to get the current page url using jQuery
Advertisements
