jQuery .prop("disabled", false) is not enabling an input

Question

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 function

function 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

possible duplicate of [Trying to disable a text input field if previous field is left blank](http://stackoverflow.com/questions/9929817/trying-to-disable-a-text-input-field-if-previous-field-is-left-blank) — Gajotres, Jul 04 '13 at 11:35

score 19 · Answer 1 · answered Jul 04 '13 at 11:28

19

Had the same problem some time ago:

$("#date1-end").prop("disabled", null);

@Gautam3164's answer is also good.

answered Jul 04 '13 at 11:28

ElmoVanKielmo

10,907
2
32
46

So unintuitive!! This works though - thank you! – Force Hero Jan 08 '21 at 15:27

GautamD31 · Answer 2 · 2013-07-04T11:32:37.817

14

Try with removeAttr like

$("#date1-end").removeAttr("disabled");

You can also try with prop like

$("#date1-end").prop("disabled",false);

edited Jul 04 '13 at 11:32

answered Jul 04 '13 at 11:27

GautamD31

28,552
10
64
85

Sorry should have elaborated with .attr that I have also tried this, but I am still getting the same problem. – RichardMc Jul 04 '13 at 11:30
1

That 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 Jul 04 '13 at 11:45

score 9 · Accepted Answer · edited Jan 16 '17 at 10:49

9

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

edited Jan 16 '17 at 10:49

hargobind

582
2
20

answered Jul 04 '13 at 11:29

Gajotres

57,309
16
102
130

This worked great. Should have looked through the Jquery mobile docs instead of just Jquery. Thanks. – RichardMc Jul 04 '13 at 13:37
1

What is the difference between your two functions? – Jeff Puckett Jun 01 '16 at 20:32
@JeffPuckettII There was a typo, and I edited the second function to "enable". – hargobind Jan 16 '17 at 11:29

Chirag Vidani · Answer 4 · 2016-12-05T11:10:10.077

-4

Prop is used just to get the value and set the value. Refer this http://api.jquery.com/prop/

$("#date1-end").prop("disabled", false);

edited Dec 05 '16 at 11:10

answered Jul 04 '13 at 11:30

Chirag Vidani

2,519
18
26

2

Scroll the page you've provided the link for, below you will see that prop also used to set the value. – loshad vtapkah Aug 30 '15 at 09:05

jQuery .prop("disabled", false) is not enabling an input

4 Answers4

Linked