jQuery remove the attribute and disable attribute; In this tutorial, you will learn how to remove attribute and disable attributes from HTML elements like input box, select box, textarea, radio button, checkbox, etc, using removeAttr() method.
You can use the jquery removeAttr () attribute method to remove the selected HTML elements (input box, select dropdown, textarea, radio button, checkbox, etc,) attribute or remove disabled attribute jquery.
In this tutorial, you will see some examples like, removing href attribute, removing data attribute value, removing the disabled attribute, and jquery removing disabled attribute from the select option.
jQuery removeAttr() Method
Using the jQuery removeAttr() Method, you can remove the specified(disable or enable) attributes from the HTML element (input box, select dropdown, textarea, radio button, checkbox, etc).
Syntax For jQuery Remove Attribute
The syntax to remove attribute values.
$("selector").removeAttr(attribute);
You can use this syntax to remove multiple attribute values.
$("selector").removeAttr(attribute attribute);
Parameters of removeAttr() Method
| Parameter | Description |
|---|---|
| attribute | This is required. It specifies one or more attributes to remove of elements. To remove several attributes, separate the attribute names with a space |
Example first – jquery remove anchor attribute
The example will demonstrate to you how to remove attributes from an HTML selected element using jQuery removeAttr() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Remove Attribute from HTML Selected Element</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".remove").click(function(){
$("#link").removeAttr("href style");
});
});
</script>
</head>
<body>
<h3 style="margin-bottom: 10px">Click the button given below</h3>
<p><a id="link" href="https://www.tutsmake.com" style="background-color: green; font-size: 50px;">Tutsmake.com</a></p>
<button type="button" class="remove">Remove Attribute</button>
</body>
</html>
Output
Click the button given below
In this above example of removeAttr() method, You can use the jQuery removeAttr() method to remove attribute of selected HTML element. When we click the Remove link button it will remove the anchor tag href attribute.
If you want to remove multiple attribute of selected html elements, you can simply pass the multiple attribute in removeAttr() method. In this remove attribute example, we have remove multiple attribute of the selected html elements.
Example second – jquery remove attribute disabled
How to remove the disabled attribute of selected HTML elements?
This example will demonstrate to you how to remove disabled attributes from an HTML selected element using the jQuery removeAttr() method.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove Disabled Attribute from HTML Selected Element</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".remove_btn").click(function(){
$(".disabled").removeAttr("disabled");
});
});
</script>
</head>
<body>
<h3 style="margin-bottom: 10px">Below this checkbox & input box are disabled</h3>
<p><input type="checkbox" class="disabled" disabled></p>
<p><input type="text" class="disabled" disabled="disabled"></p>
<p><b>Note:</b> Click the below buttons and remove disabled attribute.</p>
<button type="button" class="remove_btn">Remove Attribute</button>
</body>
</html>
Output
Below this checkbox & input box are disabled
Note: Click the below buttons and remove disabled attribute.
In the first time the selected html attribute is already set disabled, When you click on button, an alert box should show whether the attribute is removed or not.
Example Third – jquery remove disabled attribute from select option
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Remove Disabled Attribute From Select Option</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".remove_select_btn").click(function(){
$(".option").removeAttr("disabled");
});
});
</script>
</head>
<body>
<h3 style="margin-bottom: 10px">jQuery Remove Disabled Attribute From Select Box Option</h3>
<select class="select">
<option>Select Number</option>
<option class="option" data-number="0" disabled>0</option>
<option class="option" data-number="1" disabled>1</option>
<option class="option" data-number="1" disabled>2</option>
</select>
<p><b>Note:</b> Click the below buttons and remove disabled attribute from select box option.</p>
<button type="button" class="remove_select_btn">Remove Attribute</button>
</body>
</html>
Output
jquery remove disabled attribute from select option
Note: Click the below buttons and remove disabled attribute from select box option.
You may like
- How to Get & Set Data Attribute Value From Elements jQuery
- jQuery | Event MouseUp By Example
- Event jQuery Mouseleave By Example
- jQuery Event Mouseenter Example
- Event jQuery MouseOver & MouseOut By Example
- keyup jquery event example
- Jquery Click Event Method with E.g.
- Event jQuery. Blur By Example
- jQuery form submit event with example
- keydown function jQuery
- List of jQuery Events Handling Methods with examples
- Jquery Selector by .class | name | #id | Elements
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
- To Remove whitespace From String using jQuery
- jQuery Ajax Post Method Example
- To Load/Render html Page in div Using jQuery Ajax $.load
- jQuery Sibling Methods – To Find Siblings Elements
- jQuery Find Siblings Elements with Class, id
