为什么jQuery禁用元素在jQuery mobile中看起来可触摸？

Question

我想以编程方式禁用/启用html select元素。 我的项目是使用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的disabled属性不包含“true”

jQuery mobile中的示例：

原生html：

如何在HTML中以类似的方式禁用元素？

Answer 1

您需要使用jquery mobile API提供的功能来更改其组件的状态。

Selectmenu Widget：disable（） ：

$（“。selector”）。selectlectu（“disable”）;

这些元素的样式由css规则完成，而那些使用[disabled]选择器。

但是如果你做$('#filter_refn').prop('disabled', true); 在none用户输入元素上，只有属性disabled更改，但不是属性。 对于select ， button ， input等元素， $('#filter_refn').prop('disabled', true); 将改变属性和属性。

写$('#filter_refn').prop('disabled', true).attr('disabled', true); 肯定也会改变视觉外观，但你仍然应该使用API​​提供的功能。

Answer 2

您的HTML doctype是如何声明的？ 在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">

当doctype是html5时，都会产生相同的结果，这应该是正确的情况。

但是，如果您的浏览器或doctype要求“disabled”属性具有值，则可以使用jQuery“attr”函数，以某种方式

$('#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">

看看你能做到什么？