WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES

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:

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

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties