How to disable HTML input fields in jQuery ?

Enable / Disable HTML input fields in jQuery

Enable input fields

removeAttr function is used to enable the HTML input fields.

removeAttr("disabled")

Disable input fields

attr function is used to disable the HTML input fields.

attr("disabled", "disabled")

Also attr function can be used to get the HTML input field status whether disabled or not.

attr("disabled")

Example jQuery code to disable HTML input fields

<html>
   <head>
      <title>The jQuery Example - To disable text field</title>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>		
      <script type = "text/javascript">
        function toggle_active_state() {

	if($("#txtDesc").attr("disabled") == "disabled") {
		$("#txtDesc").removeAttr("disabled");
	} else {
		$("#txtDesc").attr("disabled", "disabled");
	}

        }
      </script>		
   </head>	
   <body>
<input type="text" id="txtDesc" value="testing"/>
<input type="button" value="Get Count" onclick="toggle_active_state();"/>
   </body>
</html>
Output:

Displays as below when enable the input text field.

enable code output

Displays as below when disable the input text field.

disable code output

event.keyCode- returns the pressed key code in the textbox.

here input a letter 'A' is pressed in the text field and returns a 'Key code is 65'.

Privacy Policy  |  Copyrightcopyright symbol2020 - All Rights Reserved.  |  Contact us   |  Report website issues in Github   |  Facebook page   |  Google+ page

Email Facebook Google LinkedIn Twitter
^