There is an Input Element which is disabled, the task is to enable it using JQuery. Here are a few examples discussed.
To understand example first few methods to know.
JQuery prop() method
This method set/return properties and values of selected elements.
If we use this method to return the property value, it will return the value of the FIRST selected element.
If we use this method to set property values, it will set one or more than one property/value pairs for set of selected elements.
Syntax:
-
Return the value of property:
$(selector).prop(property)
-
Set the property and value:
$(selector).prop(property, value)
-
Set the property and value using function:
$(selector).prop(property, function(index, currentValue))
-
Set multiple property and values:
$(selector).prop({property:value, property:value, ...})
JQuery removeAttr() method
This method removes one or more than one attributes from the matched elements.
Syntax:
$(selector).removeAttr(attribute)
Parameters:
- attribute:This parameter is required. It specifies one or more than one attributes to remove. If want to remove several attributes, Use a space among the attribute names.
Example-1:In this example the input element is enabled by prop() method by setting the disabled property to false.
<!DOCTYPE HTML> <html> <head> <title> JQuery | Remove “disabled” attribute. </title> <script src = </script> </head> <body style = "text-align: center;"> <h1 style = "color: green;" > GeeksForGeeks </h1> Input Box: <input type = "text" disabled = "disabled" class = "Disable" value = ""/> <br> <br> <button id = "enable"> click to Enable </button> <script> $("#enable").click(function(event) { event.preventDefault(); $('.Disable').prop("disabled", false); }); </script> </body> </html> |
Output:
-
Before clicking on the button:
-
After clicking on the button:
Example-2:In this example the input element is enabled by removeAttr() method by removing the disabled property.
<!DOCTYPE HTML> <html> <head> <title> JQuery | Remove “disabled” attribute. </title> <script src = </script> </head> <body style = "text-align: center;"> <h1 style = "color: green;" > GeeksForGeeks </h1> Input Box: <input type = "text" disabled = "disabled" class = "Disable" value = ""/> <br> <br> <button id = "enable"> click to Enable </button> <script> $("#enable").click(function(event) { event.preventDefault(); $('.Disable').removeAttr("disabled") }); </script> </body> </html> |
Output:
-
Before clicking on the button:
-
After clicking on the button:
