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

Posted 2021-05-06

我想以编程方式禁用/启用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中以类似的方式禁用元素？

答案

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

Selectmenu Widget: disable()：

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

这些元素的样式由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​​提供的功能。

另一答案

您的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">

看看你能做到什么？