Q:

How to remove the clickable behavior from a disabled link using jQuery

mhmadesk
Save to bookmark
|
2022-05-17
|
  614 
Very Easy
0

How to remove the clickable behavior from a disabled link using jQuery

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this 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:

<!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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now