How to disable HTML links using JavaScript / jQuery ?

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

Disable HTML link using 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.

  • 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.
  • 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.

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>  
<html>  
    <head
        <title
            How to disable HTML links
            using JavaScript
        </title>
          
        <style>
            a.disabled {
                pointer-events: none;
            }
        </style>
    </head
      
    <body style = "text-align:center;">  
      
        <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>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            How to disable HTML links
            using JavaScript
        </title>
          
        <style>
            a.disabled {
                pointer-events: none;
            }
        </style>
    </head
      
    <body style = "text-align:center;"
      
        <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>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

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:

    • Return the value of an property:

      $(selector).prop(property)
      
    • Set the property and value:

      $(selector).prop(property,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 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 names to the specified elements. This method does not do anything with existing class attributes, it adds one or more than one class names 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 names 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            How to disable HTML links
            using jQuery
        </title>
          
        <script src =
        </script>
          
        <style>
            a.disabled {
                pointer-events: none;
            }
        </style>
    </head
      
    <body style = "text-align:center;"
      
        <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>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            How to disable HTML links
            using jQuery
        </title>
          
        <script src
        </script>
          
        <style>
            a.disabled {
                pointer-events: none;
            }
        </style>
    </head
      
    <body style = "text-align:center;"
      
        <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>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.