Unable to enable disabled input

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>

Do not user $().attr() user $().prop() instead. See http://api.jquery.com/prop/ — Lacrioque, Sep 26 '15 at 10:05

score 8 · Accepted Answer · answered Sep 26 '15 at 10:06

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');
});

score 6 · Answer 2 · answered Sep 26 '15 at 10:07

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>

John Louie Dela Cruz · Answer 3 · 2015-09-26T10:04:47.020

4

Just remove the disabled attribute

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

edited Sep 26 '15 at 10:04

answered Sep 26 '15 at 10:04

John Louie Dela Cruz

619
6
19

This is not a good practice. from the documentation: `Do not use this method to remove native properties such as checked, disabled, or selected.` – Selfish Sep 26 '15 at 10:10
why not? any insights @NitaiJ.Perez? – dorado Sep 26 '15 at 10:13
@anurageldorado, the docs mention it may remove the prop/attr permanently, not allowing it to be re-set. – Selfish Sep 26 '15 at 10:15
So it's not so harmful in all the cases right? – dorado Sep 26 '15 at 10:20
@anurageldorado, why take the risk? See my answer for a safe method. – Selfish Sep 26 '15 at 10:27

score 2 · Answer 4 · answered Sep 26 '15 at 10:05

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>

jlocker · Answer 5 · 2015-09-26T10:23:25.973

1

Hi Try the below code

There is different between Boolean values and strings instead of 'true' use 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>

edited Sep 26 '15 at 10:23

answered Sep 26 '15 at 10:05

jlocker

1,449
1
10
23

1

Again, the attr() Method does not work with boolean values – Lacrioque Sep 26 '15 at 10:06
@Lacrioque who is saying? – jlocker Sep 26 '15 at 10:10
Jquey online documentation: http://api.jquery.com/prop/ See Attributes versus Properties – Lacrioque Sep 26 '15 at 10:21
Answer for what you said about using Boolean values.. – jlocker Sep 26 '15 at 10:26
Pre 1.6 Jquery used boolean values with attr() I give you that, but after the prop() Method got introduced, the documentation clearly states, that using boolean values with attr() will cause errors. If you have a working code great! But again boolean values should not be used with attr() – Lacrioque Sep 26 '15 at 10:29

score 1 · Answer 6 · answered Sep 26 '15 at 10:13

<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>

score 0 · Answer 7 · answered Sep 26 '15 at 10:05

0

try

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

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

because disable="disable" is equal to disable itself

answered Sep 26 '15 at 10:05

urfusion

5,064
4
41
81

score 0 · Answer 8 · answered Sep 26 '15 at 10:05

0

There is a way! You need to remove the disabled attribute like so :

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

answered Sep 26 '15 at 10:05

aphextwix

1,531
3
16
26

Unable to enable disabled input

8 Answers8