jQuery Remove Attribute Disabled

jQuery remove disable attribute; In this tutorial, i am going to show you how to remove attribute or disable attribute of selected html elements (input, select box, radio button, etc) using jQuery removeAttr() method.

jQuery Remove Attribute Disabled

Using the jQuery removeAttr () Method; you can removes the specified attributes or remove disabled attribute from the HTML element.

Syntax for jQuery RemoveAttr() Method

You can use this syntax to remove attribute value.

$("selector").removeAttr(attribute);

You can use this syntax to remove multiple attribute value.

$("selector").removeAttr(attribute attribute);

Parameters for 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 1 – Remove disabled attribute of anchor tag jQuery

See the following example for 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.laratutorials.com" style="background-color: green; font-size: 50px;">Laratutorials.com</a></p>
    <button type="button" class="remove">Remove Attribute</button>
</body>
</html>

Demo for Remove disabled attribute of anchor tag jQuery

jQuery Remove Attribute from HTML Selected Element

Click the button given below

Laratutorials.com

Note that:- When you click the Remove link button it will remove the anchor tag href attribute using jQuery removeAttr() method.

Example 2 – jQuery remove disabled attribute from input

See the following example for jQuery remove disabled attribute from input:

<!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>

Demo for jQuery remove disabled attribute from input

Remove Disabled Attribute from HTML Selected Element

Below this checkbox & input box are disabled

Note: Click the below buttons and remove disabled attribute.

Note that, the selected html attribute is already disabled, When you click on button, an alert box should show whether the attribute is removed or not.

Example 3 – 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>

Demo for jQuery remove disabled attribute from select option

jQuery Remove Disabled Attribute From Select Option

jQuery Remove Disabled Attribute From Select Box Option

Note: Click the below buttons and remove disabled attribute from select box option.

jQuery Remove Attribute Disabled