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

Last Updated : 31 May, 2023

In this article, we will see how to remove the clickable behavior from a disabled link using jQuery. To remove the clickable behavior, we will use the removeAttr() method. The removeAttr() method is used to remove one or more attributes from the selected elements.

Syntax:

$(selector).removeAttr(attribute)

Parameters: This method accepts a single parameter attribute that is mandatory. It is used to specify one or more attributes to remove. Several attributes can be separated using the space operator.

In this article, we will remove the href attribute using the removeAttr() method.

Example: In this example, we will see the use of the removeAttr() method.

HTML

<!DOCTYpe html>
<html>
<head>
    <title>
        How to remove clickable behavior from
        a disabled link using jQuery?
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("body").css("text-align", "center");
            $("h1").css("color", "green");
            $("a").css({
                fontSize: "34px",
                fontWeight: "bold",
                color: "green",
                textDecoration: "none"
            })
            $("a").each(function () {
                if ($(this).hasClass("disabled")) {
                    $(this).removeAttr("href");
                }
            });
        });
    </script>
</head>
 
<body>
    <a href="https://www.geeksforgeeks.org/"
       class="disabled">
        GeeksforGeeks
    </a>
    <h3>
        How to remove the clickable behavior from
        <br>a disabled link using jQuery?
    </h3>
</body>
</html>