In this post, we will learn how to disable a link using jQuery. So how we can do this, we will learn in this post. 


How To Disable A Link Using jQuery ?


Disable A Link

To disable a link, we use  removeAttr()  jQuery method. With this method we remove  href  attribute from the anchor element. Then the link will not be clickable and will be disabled. So how this works we will see in the given example.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Disable A Link Using jQuery ?</title>
</head>
<body>
<a href="https://www.codexradar.com">CodexRadar</a>

<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


<script>
$(document).ready(function(){
$("a").removeAttr("href");
});
</script>
</body>
</html> code-box


This above code disables all links. If you want to disable specific links, see this example.
We use the  disable  class to disable a specific link. Then with the help of jQuery we disable the link that contains the  disable  class.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Disable A Link Using jQuery ?</title>
</head>
<body>

<div class="list">
<a href="https://www.codexradar.com">Home</a>
<a href="https://www.codexradar.com/p/about-us.html">About Us</a>
<a href="https://www.codexradar.com/p/contact-us.html" class="disable">Contact Us</a>
</div>

<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


<script>
$(document).ready(function(){
$(".list a").each(function(){
if($(this).hasClass("disable")){
$(this).removeAttr("href");
}
});
});
</script>
</body>
</html> code-box



Summary

In this post we learned how to disable a link using jQuery. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.    

Post a Comment

Previous Post Next Post