How to disable/enable an input box with jQuery?

jQuery Web Development Front End Technology

We can easily disable input box(textbox,textarea) using disable attribute to “disabled”.

$(‘elementname’).attr(‘disabled’,’disabled’);

To enable disabled element we need to remove “disabled” attribute from this element.

$(‘elementname’).removeAttr(‘disabled’);

Example

<html >
<head>
   <title>ed</title>
      <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
      <script type="text/javascript">
         $(document).ready(function () {
            $('#btn1').click(function () {
               $('input').attr('disabled', 'disabled');
            });
            $('#btn2').click(function () {
               $('input').removeAttr('disabled');
            });
         });
      </script>
   </head>
<body>
<div>
<input type="text" id="tt1" /><br />
   <button type="button" id="btn1">Disable</button>
   <button type="button" id="btn2">Enable</button>
</div>
</body>
</html>

Arnab Chakraborty

Updated on: 22-Jun-2020

16K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started