jQuery | disable/enable an input element
The disable/enable an input element in jQuery can be done by using prop() method. The prop() method is used to set or return properties and values for the selected elements.
Example 1: This example uses prop() method to disable the input text field.
<!DOCTYPE html> < html > < head > < title > JavaScript enable/disable an input element </ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > w3wiki </ h1 > < input id = "input" type = "text" name = "input" /> < button onclick = "enable_disable()" > Enable/Disable </ button > <!-- Script to disable input text area --> < script > function enable_disable() { $("input").prop('disabled', true); } </ script > </ body > </ html > |
Output:
- Before clicking the button:
- After clicking the button:
Example 2: This example uses prop() method to enable the input text field.
<!DOCTYPE html> < html > < head > < title > JavaScript enable/disable an input element </ title > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > w3wiki </ h1 > < input id = "input" type = "text" name = "input" disabled/> < button onclick = "enable_disable()" > Enable/Disable </ button > <!-- Script to enable input text fields --> < script > function enable_disable() { $("input").prop('disabled', false); } </ script > </ body > </ html > |
Output:
- Before clicking the button:
- After clicking the button:
Contact Us