Jul 02, 2024 | HTML Laravel
Hello Dev,
This tutorial explains how to disable an anchor tag in html using javascript. You will learn how to prevent a link from being clickable. We'll provide examples of disabling an element in javascript to guide you through the process. This article also covers disabling a link in jQuery in detail. follow the steps below to learn how to disable an anchor tag in jquery.
If you need to deactivate a link, I will provide various examples of how to disable an anchor tag using css, jquery, and javascript.
now, let's explore a few straightforward examples that demonstrate how to disable the href attribute of an anchor tag in html.
Method: 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to Disable a Anchor Tag in HTML? - ItErrorSolution.com</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#disableLink').click(function(event) {
event.preventDefault(); // Prevent the default action of the link
$('#myLink').css('pointer-events', 'none'); // Disable mouse events
$('#myLink').css('color', 'gray'); // Change color to indicate disabled state
$('#myLink').css('text-decoration', 'none'); // Remove underline
});
});
</script>
</head>
<body>
<h1>How to Disable a Anchor Tag in HTML? - ItErrorSolution.com</h1>
<a id="myLink" href="https://example.com">Click me</a>
<br><br>
<button id="disableLink">Disable Link</button>
</body>
</html>
Read Also: How to Show Image from Storage Folder in Laravel?
Method: 2
<!DOCTYPE html>
<html>
<head>
<title>How to Disable a Anchor Tag in HTML? - ItErrorSolution.com</title>
</head>
<body>
<h1>How to Disable a Anchor Tag in HTML? - ItErrorSolution.com</h1>
<a href="https://www.iterrorsolution.com" onclick="return false;">Go to ItErrorSolution.com</a>
</body>
</html>
Read Also: Laravel 11 Create Comment System with Replies Example
Method: 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to Disable a Anchor Tag in HTML? - ItErrorSolution.com</title>
<script>
function disableLink() {
// Prevent the default action of the link
event.preventDefault(); // Prevents the link from being followed
// Optionally, you can also disable the link visually
// For example, change its appearance
var link = document.getElementById('myLink');
link.style.pointerEvents = 'none'; // Disable mouse events on the link
link.style.color = 'gray'; // Change color to indicate it's disabled
link.style.textDecoration = 'none'; // Remove underline
}
</script>
</head>
<body>
<h1>How to Disable a Anchor Tag in HTML? - ItErrorSolution.com</h1>
<a id="myLink" href="https://example.com">Click me</a>
<br><br>
<button onclick="disableLink()">Disable Link</button>
</body>
</html>
Read Also: Laravel 11 Database Notifications Example Tutorial
Method: 4
<!DOCTYPE html>
<html>
<head>
<title>How to Disable a Anchor Tag in HTML? - ItErrorSolution.com</title>
</head>
<body>
<h1>How to Disable a Anchor Tag in HTML? - ItErrorSolution.com</h1>
<a href="javascript:function() { return false; }">Go to ItErrorSolution.com</a>
</body>
</html>
Feel free to ask if you have any questions or need further clarification!
"Hey there! I'm a full-stack developer and proud owner of ItErrorSolution.com, based right here in India. I love nothing more than sharing handy tips and tricks with my fellow developers through easy-to-follow tutorials. When it comes to coding, I'm all about PHP, Laravel, Angular, Vue, Node, JavaScript, jQuery, CodeIgniter, and Bootstrap – been hooked on them forever! I'm all about putting in the work and staying committed. Ready to join me on this journey to coding?"