How to disable href link in jQuery

In this tutorial, we are going to see how to disable href link or how to remove clickable behavior from a link whose class is .disabled. The clickable behavior of the “Link4” in the following example is disabled by removing the “href” attribute from the link using jQuery’s removeAttr() method.

How to disable href link in jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>How to disable href link</title>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(".menu a").each(function(){
					if($(this).hasClass("disabled")){
						$(this).removeAttr("href");
					}
				});
			});
		</script>
	</head>
	<body>
		<ul class="menu">
			<li><a href="https://stackhowto.com">Link1</a></li>
			<li><a href="https://stackhowto.com">Link2</a></li>
			<li><a href="https://stackhowto.com">Link3</a></li>
			<li><a href="https://stackhowto.com" class="disabled">Link4</a></li>
		</ul>
	</body>
</html>

Result
Link1 Link2 Link3 Link4

How to disable href link in jQuery

You May Also Like

How to add CSS properties to an element dynamically with jQuery

How to add attribute to an HTML element in jQuery

How to Loop Through Elements with the Same Class in jQuery

Leave a Reply Cancel reply