为什么 jQuery 禁用的元素在 jQuery 移动设备中看起来可以触摸？

Question

我想以编程方式 disable/enable 一个 html select 元素。我的项目正在使用 jQuery 移动版 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>

这“不知何故有效。由于用户不能select任何东西，但是该框仍然处于活动状态并且不会像直接在html中那样被禁用。

我注意到 jQuery 禁用的属性不包含“true”

jQuery 手机中的示例：

原生 html:

如何以类似于 HTML 的方式禁用该元素？

Answer 1

您的 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 时，所有结果都相同，这应该是正确的大小写。

但是，如果您的浏览器或文档类型要求 "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">

看看是否符合您的要求？

Answer 2

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

Selectmenu Widget: disable():

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

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

但是，如果您对 none 用户输入元素执行 $('#filter_refn').prop('disabled', true);，则只有属性 disabled 会发生变化，而不会更改属性。对于 select、button、input 等元素，... $('#filter_refn').prop('disabled', true); 将同时更改属性和属性。

编写 $('#filter_refn').prop('disabled', true).attr('disabled', true); 肯定也会改变视觉外观，但您仍然应该使用 API.

提供的功能

为什么 jQuery 禁用的元素在 jQuery 移动设备中看起来可以触摸？

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

javascript

jquery

jquery-mobile