Solved: jQuery disable and enable input

The main problem with disabling and enabling input is that it can cause unexpected behavior. For example, if you disable input on a form, users might not be able to submit the form.

 field

To disable an input field in jQuery, use the prop() method. To enable an input field in jQuery, use the removeAttr() method.

Example

You can try to run the following code to learn how to enable and disable input field −

<html> <head> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%20%3D%20%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F3.2.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%20%24(document).ready(function()%7B%20%24(%22%23btn1%22).click(function()%7B%20%24(%22input%22).prop(%22disabled%22%2C%20true)%3B%20%7D)%3B%20%24(%22%23btn2%22).click(function()%7B%20%24(%22input%22).removeAttr(%22disabled%22)%3B%20%7D)%3B%20%7D)%3B%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> </head> <body> <p><b>Note:</b> This example does not work in Internet Explorer 8 and earlier versions.</p> Name: <input type = "text" id = "test"> <button id = "btn1">Disable</button><br><br><br><br><br><br><br><br><br></body></html>

Buttons

Buttons are a common element in jQuery. They can be used to create simple buttons, or more complex buttons with event handlers.

To create a simple button, use the

To create a more complex button, use the

Enable / Disable

Enable and Disable are two jQuery functions that allow you to control the visibility of elements on a page.

Related posts:

Leave a Comment