How to disable HTML links using JavaScript / jQuery ?

29 May, 2019
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.
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.
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.
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.
<!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>
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.
<!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>                    
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.
Syntax:
Return the value of an property:$(selector).prop(property)

$(selector).prop(property)

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

$(selector).prop(property,value)

Set property and value using a function:$(selector).prop(property,function(index,currentvalue))

$(selector).prop(property,function(index,currentvalue))

Set multiple properties and values:$(selector).prop({property:value, property:value,...})

$(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.
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.
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.
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.
<!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 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>                    
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.
<!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 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>                    
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
jQuery-Misc
JavaScript
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.