Unable to enable disabled input

Question

Input elements can be easily disabled, but what is the way to enable them?

The code below may disable but not enable the input element.

$('#dis').click(function() { $('#inp').attr('disabled', 'true'); }); $('#enb').click(function() { $('#inp').attr('disabled', 'false'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id='inp' type='text'> <button id='enb'>Enable</button> <button id='dis'>Disable</button> 

Answer 1

Just to expand the answer ...

The real problem is that you are trying to set false to false through setAttribute() , which does not behave as you expect. An element is disabled if the disabled-attribute is set regardless of the value, therefore disabled="true" , disabled="disabled" and disabled="false" equivalent: the element is disabled).

Instead, you should remove the full attribute.

 $('#enb').click(function() { $('#inp').removeAttr('disabled'); }); 

Answer 2

Just remove the disabled attribute

 $('#enb').click(function() { $('#inp').removeAttr('disabled'); }); 

Answer 3

The problem was that your code had true and false written in quotation marks, which makes them strings instead of booleans. Note that both 'true' and 'false' are true values, and thus your code sets the value to enabled true in both cases.

I expect the following to work for you, check also the snippet:

 $('#dis').click(function() { $("#inp").prop('disabled', true); }); $('#enb').click(function() { $("#inp").prop('disabled', false); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id='inp' type='text'> <button id='enb'>Enable</button> <button id='dis'>Disable</button> 

Answer 4

You can use removeAttr()

 $('#dis').click(function() { $('#inp').attr('disabled', 'true'); }); $('#enb').click(function() { $('#inp').removeAttr('disabled'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id='inp' type='text'> <button id='enb'>Enable</button> <button id='dis'>Disable</button> 

Answer 5

Hey. Try the code below

Boolean values ​​and strings differ from 'true' true without quotes

 $('#dis').click(function() { $('#inp').attr('disabled', true); }); $('#enb').click(function() { $('#inp').attr('disabled', false); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id='inp' type='text'> <button id='enb'>Enable</button> <button id='dis'>Disable</button> 

Answer 6

 <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id='inp' type='text'> <button id='enb'>Enable</button> <button id='dis'>Disable</button> <script type="text/javascript"> $( document ).ready(function() { $( "#dis" ).click(function() { $('#inp').prop( "disabled", true ); }); $( "#enb" ).click(function() { $('#inp').prop( "disabled", false ); }); }); </script> 

Answer 7

to try

 $('#dis').click(function() { $('#inp').attr('disabled', 'true'); }); $('#enb').click(function() { $('#inp').removeAttr('disabled'); }); 

because disable="disable" is equal to disable itself

Answer 8

There is a way! You need to remove the disabled attribute as follows:

 $('#inp').removeAttr('disabled');