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:
