Unable to enable disabled input [duplicate]

Question

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

The below code can 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

The issue was with your code having true and false written in quotes, making them strings instead of booleans. Note that both 'true' and 'false' are truthy values, and thus your code set the enabled value to true in both cases.

I expect the following will work for you, check the snippet as well:

$('#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 2

Just to expand on the answer...

The real problem is that you are trying to set disabled to false via setAttribute() which doesn't behave as you are expecting. An element is disabled if the disabled-attribute is set, regardless of value so, disabled="true", disabled="disabled" and disabled="false" are all equivalent: the element gets disabled).

You should instead remove the complete attribute

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