jQuery .prop("disabled", false) is not enabling an input
Solution 1
Working example: http://jsfiddle.net/d9vzs/
This is not how you enable disable jQUery Mobile input elements.
It can be done with this functions:
$( "input" ).textinput( "disable" );
$( "input" ).textinput( "enable" );
Official documentation: http://api.jquerymobile.com/textinput/#method-disable
Solution 2
Had the same problem some time ago:
$("#date1-end").prop("disabled", null);
@Gautam3164's answer is also good.
Solution 3
Try with removeAttr
like
$("#date1-end").removeAttr("disabled");
You can also try with prop
like
$("#date1-end").prop("disabled",false);
Related videos on Youtube
RichardMc
Updated on August 12, 2020Comments
-
RichardMc over 3 years
I'm having a problem re-enabling an input after it has been disabled on the page load.
I'm using two inputs to accept two dates, but I want it that the second input is not enabled until the first one has a value.
<div id="date1" data-role="fieldcontain"> <label for="date1-start" id="date1-startlbl">Start Date</label> <input name="date1-start" id="date1-start" type="date" data-role="datebox"data-options='{"mode": "calbox", "overrideDateFormat": "%Y-%m-%d", "beforeToday": true}' data-theme="a" onchange="showdate()"/> <label for="date1-end" id="date1-endlbl">End Date</label> <input name="date1-end" id="date1-end" type="date" data-role="datebox" data-options='{"mode": "calbox", "overrideDateFormat": "%Y-%m-%d", "beforeToday": true}' data-theme="a" onchange="datechart()"/> </div>
The second input is disabled successfully on the page load with.
$("#date1-end").prop("disabled", true);
The first date has an
onchange
event that calls the following functionfunction showdate(){ if ($("#date1-start").val() != null){ if ($("#date1-end").val() != ""){ datechart(); } else{ $("#date1-end").prop("disabled", false); $("#date1-end").trigger('change'); } } }
The function is called and
prop("disabled", false)
when reached fires without any errors, but the input remains disabled. The trigger('change') I am using is an attempt at refreshing the element but the same problem exists without it.I have tried different variations of
.attr
from an older version of Jquery but I also get the same problem.I am using Jquery 1.9.1, Jquery-mobile 1.3.1 and PhoneGap 2.7.0
-
Gajotres almost 11 yearspossible duplicate of Trying to disable a text input field if previous field is left blank
-
-
RichardMc almost 11 yearsSorry should have elaborated with .attr that I have also tried this, but I am still getting the same problem.
-
RichardMc almost 11 yearsThat was what I had originally been using but I get the same problem. I have read I may need to refresh the element after enabling it. Is there any truth in that?
-
RichardMc almost 11 yearsThis worked great. Should have looked through the Jquery mobile docs instead of just Jquery. Thanks.
-
loshad vtapkah over 8 yearsScroll the page you've provided the link for, below you will see that prop also used to set the value.
-
Jeff Puckett almost 8 yearsWhat is the difference between your two functions?
-
hargobind over 7 years@JeffPuckettII There was a typo, and I edited the second function to "enable".
-
Force Hero over 3 yearsSo unintuitive!! This works though - thank you!