Почему отключенный элемент jQuery выглядит сенсорным в мобильном jQuery?

Question

Я хочу отключить / включить элемент выбора HTML программно. Мой проект использует jQuery mobile 1.4.5 и jQuery 2.1.4.

Чтобы отключить элемент в jQuery, я делаю:

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

Результаты после рендеринга в:

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

Это "как-то работает". Поскольку пользователь не может ничего выбрать, однако поле все еще активно и не отключено, как если бы оно выполнялось непосредственно в html.

Я заметил, что отключенное свойство jQuery не содержит "true"

пример в jQuery mobile:

собственный html:

Как отключить элемент таким же образом, как в HTML?

Answer 1

Вам необходимо использовать функции, предоставляемые мобильным API jquery, для изменения состояния их компонентов.

Виджет Selectmenu: disable () :

$ (".selector") .selectmenu ("отключить");

Стилизация этих элементов выполняется по правилам css, и в них используется селектор [disabled].

Но если вы сделаете $('#filter_refn').prop('disabled', true); для элемента ввода, не являющегося пользователем, то изменится только свойство disabled, но не атрибут.Для таких элементов, как select, button, input, ... $('#filter_refn').prop('disabled', true); изменит и свойство, и атрибут.

Запись $('#filter_refn').prop('disabled', true).attr('disabled', true); наверняка также изменит внешний вид, но выпо-прежнему следует использовать функциональные возможности, предоставляемые API.

Answer 2

Как объявлен ваш HTML-тип документа? В XHTML атрибут «disabled» должен иметь значение, в то время как в HTML он не должен иметь значение. Также он может иметь какое-то отношение к вашему браузеру, поэтому было бы более полезно, если бы вы могли предоставить больше информации о объявлении DOCTYPE и браузере, который вы используете для тестирования страницы.

Для моей последней версии настольного браузера Chrome

<select name="ref_id" id="filter_refn" data-mini="true" disabled>
<select name="ref_id" id="filter_refn" data-mini="true" disabled="">
<select name="ref_id" id="filter_refn" data-mini="true" disabled="disabled">

все выдают одинаковый результат, когда тип документа имеет тип html5, что должно быть в правильном случае.

Однако, если ваш браузер или doctype требуют, чтобы атрибут «disabled» имел значение, вы можете использовать функцию «attr» jQuery, которая каким-то образом

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

производит

<select name="ref_id" id="filter_refn" data-mini="true" disabled>

пока

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

производит

<select name="ref_id" id="filter_refn" data-mini="true" disabled="disabled">

и посмотрите, будет ли это то, что вы хотите?