How to disable HTML links using JavaScript / jQuery ?

Last Updated : 19 Jan, 2023

Given an HTML link and the task is to disable the link by using JavaScript/jQuery.

Approach 1: Disable HTML link using JavaScript using setAttribute() Method.

JavaScript setAttribute() Method: This method adds the defined attribute to an element and gives it to the passed value. In case of the specified attribute already exists, the value is set/changed.

Syntax:

element.setAttribute(attrName, attrValue)

Parameters:

attrName: This parameter is required. It specifies the name of the attribute to add.
attrValue: This parameter is required. It specifies the value of the attribute to add.

Example 1: This example adds the class disabled to the <a> element with the help of setAttribute() method.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to disable HTML links
        using JavaScript
    </title>

    <style>
        a.disabled {
            pointer-events: none;
        }
    </style>
</head>

<body>

    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <a href="#" id="GFG_UP">
        LINK
    </a>

    <br><br>

    <button onclick="gfg_Run()">
        disable
    </button>

    <p id="GFG_DOWN" style="color:green; 
          font-size: 20px; font-weight: bold;">
    </p>

    <script>
        var link = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        
        function gfg_Run() {
        link.setAttribute("class", "disabled");
        link.setAttribute("style", "color: black;");
        down.innerHTML = "Link disabled";
        }        
    </script>
</body>

</html>

Output:

How to disable HTML links using JavaScript / jQuery ?

Approach 2: Disable HTML link using JavaScript using the setAttributeNode() and createAttribute() method.

JavaScript createAttribute() Method: This method creates an attribute with the defined name and returns the attribute as an attribute object.

Syntax:

document.createAttribute(attrName)

Parameters:

This method accepts single parameter attrName which is required. It specifies the name of the created attribute.

Return value: It returns a node object, denoting the created attribute.

JavaScript setAttributeNode() Method: This method adds the specified attribute node to an element. In case of the specified attribute already exists, this method replaces it.

Syntax:

element.setAttributeNode(attributeNode)

Parameters: This method accepts single parameter attributeNode which is required. It specifies the attribute node to be added.

Return Value: This method returns an attribute object which represents the replaced attribute node otherwise it returns null.

Example : This example adds the class disable to the <a> element with the help of setAttributeNode() method by first creating an attribute using createAttribute() method and then adding it to the <a> element.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to disable HTML links
        using JavaScript
    </title>

    <style>
        a.disabled {
            pointer-events: none;
        }
    </style>
</head>

<body>

    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <a href="#" id="GFG_UP">
        LINK
    </a>

    <br><br>

    <button onclick="gfg_Run()">
        disable
    </button>

    <p id="GFG_DOWN" style="color:green; 
          font-size: 20px; font-weight: bold;">
    </p>

    <script>
        var link = document.getElementById('GFG_UP');
        var down = document.getElementById('GFG_DOWN');
        
        function gfg_Run() {
            var attr = document.createAttribute("class");
            attr.value = "disabled";                        
            link.setAttributeNode(attr);
            link.setAttribute("style", "color: black;");
            down.innerHTML = "Link disabled";
        }        
    </script>
</body>

</html>

Output:

Disable HTML link using jQuery

jQuery prop() Method: This method set/return properties and values of the matched elements. If this method is used to return the property value, it returns the value of the first selected element. If this method is used to set property values, it sets one or more property/value pairs for the set of selected elements.

Syntax:

$(selector).prop(property) // Return the value of an property 
$(selector).prop(property,value) // Set the property and value

// Set property and value using a function 
$(selector).prop(property,function(index,currentvalue))  
// Set multiple properties and values
$(selector).prop({property:value, property:value,...})

Parameters:

property: This parameter specifies the name of the property.
value: This parameter specifies the value of the property.
function(index,currentvalue): This parameter specifies a function that returns the property value to set.
- index: This parameter receives the index position of an element in the set.
- currentValue: This parameter receives the current property value of selected elements.

addClass() Method: This method adds one or more than one class name to the specified elements. This method does not do anything with existing class attributes, it adds one or more than one class name to the class attribute.

Syntax:

$(selector).addClass(className,function(index,currentClass))

Parameters:

className: This parameter is required. It specifies one or more than one class name to add.
function(index,currentClass): This parameter is optional. It specifies a function that returns one or more class names to add.
- index: It returns the index position of the element in the set.
- className: It returns the current class name of the selected element.

Example 1: This example adds the class('disabled') to the <a> element with the help of addClass() method.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to disable HTML links
        using jQuery
    </title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>

    <style>
        a.disabled {
            pointer-events: none;
        }
    </style>
</head>

<body>

    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <a href="#" id="GFG_UP">
        LINK
    </a>

    <br><br>

    <button onclick="gfg_Run()">
        disable
    </button>

    <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;">
    </p>

    <script>
        function gfg_Run() {
            $('a').addClass("disabled");
            $('a').css('color', 'black');
            $('#GFG_DOWN').text("Link disabled");
        }        
    </script>
</body>

</html>

Output:

Example 2: This example adds the class('disabled') to the <a> element with the help of prop() method.

html

<!DOCTYPE HTML>
<html>
    <head>
        <title>
            How to disable HTML links
            using jQuery
        </title>
        
        <script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
        </script>
        
        <style>
            a.disabled {
                pointer-events: none;
            }
        </style>
    </head>
    
    <body>
    
        <h1 style = "color:green;" >
            GeeksForGeeks
        </h1>

        <a href = "#" id = "GFG_UP">
            LINK
        </a>
        
        <br><br>
        
        <button onclick = "gfg_Run()">
            disable
        </button>
        
        <p id = "GFG_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
        
        <script>
            function gfg_Run() {
                $('a').prop("class","disabled");
                $('a').css('color', 'black');
                $('#GFG_DOWN').text("Link disabled");
            }        
        </script>
    </body>
</html>

Output:

PranchalKatiyar

Improve

Article Tags :

How to disable HTML links using JavaScript / jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?