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>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'); }); 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>Just remove the disabled attribute
$('#enb').click(function() { $('#inp').removeAttr('disabled'); }); 
Do not use this method to remove native properties such as checked, disabled, or selected.
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>
<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> 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>
try
$('#dis').click(function() { $('#inp').attr('disabled', 'true'); }); $('#enb').click(function() { $('#inp').removeAttr('disabled'); }); because disable="disable" is equal to disable itself
There is a way! You need to remove the disabled attribute like so :
$('#inp').removeAttr('disabled'); 