Search code examples
javascriptjqueryjquery-mobile

Why does a jQuery disabled element look touchable in jQuery mobile?

I want to disable/enable a html select element programatically. My project is using jQuery mobile 1.4.5 and jQuery 2.1.4.

To disable the element in jQuery I do:

 $('#filter_refn').prop('disabled', true);

Results after rendering in:

<select name="ref_id" id="filter_refn" data-mini="true" disabled="">
    <option value="" selected="">Referenznummer auswählen</option>
</select>

This "somehow works. As the user can not select anything, however the box is still active and not disabled as it would be by doing it directly in html.

I noticed that the disabled property by jQuery does not contain "true"

example in jQuery mobile:

enter image description here

native html:

enter image description here

How can I disable the element in a similar way then in HTML?

Solution

  • You need use the functions provided by the jquery mobile API to change the state of their components.

    Selectmenu Widget: disable():

    $( ".selector" ).selectmenu( "disable" );

    The styling of those elements is done by css rules and those utilize the [disabled] selector.

    But if you do $('#filter_refn').prop('disabled', true); on a none user input element, then only the property disabled changes, but not the attribute. For elements like select, button, input, ... the $('#filter_refn').prop('disabled', true); will change both property and attribute.

    Writing $('#filter_refn').prop('disabled', true).attr('disabled', true); would most certainly also change the visual appearance, but you still should use the functionality provided by the API.