How to disable HTML links using JavaScript / jQuery ?
Last Updated :
11 Jul, 2025
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:
How to disable HTML links using JavaScript / jQuery ?
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:
How to disable HTML links using JavaScript / jQuery ?How to disable HTML links using JavaScript / jQuery ?
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:
How to disable HTML links using JavaScript / jQuery ?
Similar Reads
How to Disable Textarea using JavaScript? This article will show you how to disable the textarea using JavaScript. Disabling a textarea using JavaScript can be done by setting the disabled property of the textarea element to true. This prevents the user from editing the content of the textarea. There are some reasons to use disabled textare
2 min read
How to disable right click on web page using JavaScript ? Disabling right-click on a web page can be done using the DOM Events. It is a client-side action, and it can be achieved using JavaScript. However, it's important to note that attempting to prevent right-clicking is not a foolproof method for protecting your content, as users can easily bypass it by
2 min read
How to disable right click on web page using JavaScript ? Disabling right-click on a web page can be done using the DOM Events. It is a client-side action, and it can be achieved using JavaScript. However, it's important to note that attempting to prevent right-clicking is not a foolproof method for protecting your content, as users can easily bypass it by
2 min read
How to Disable Input in JavaScript ? Disabling input fields in JavaScript is a common task when you want to restrict users from interacting with specific form elements. This can be useful in various scenarios, such as preventing modifications to fields that are conditionally locked or ensuring certain inputs are controlled programmatic
2 min read
How to Disable Specific Readio Button Option using JavaScript? In this article, we will disable a specific radio button using JavaScript. Disabling specific radio button options using JavaScript involves targeting the specific option and then set its disabled property to true. This can be done by selecting the radio button option and modifying its disabled prop
2 min read
How to remove “disabled†attribute from HTML input element using JavaScript ? In HTML, we use input elements for user input. The 'disabled' property helps prevent interaction with these elements. For example, if we only want users over 18 to input their Adhar card numbers, we can use JavaScript to remove the 'disabled' attribute when the user enters an age greater than 18. Th
2 min read