为啥 jQuery 禁用的元素在 jQuery mobile 中看起来是可触摸的？

Posted 2023-05-09

【中文标题】为啥 jQuery 禁用的元素在 jQuery mobile 中看起来是可触摸的？

【英文标题】：Why does a jQuery disabled element look touchable in jQuery mobile?为什么 jQuery 禁用的元素在 jQuery mobile 中看起来是可触摸的？

【发布时间】：2019-08-13 03:36:13

【问题描述】：

我想以编程方式禁用/启用 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 的 disabled 属性不包含“true”

jQuery mobile 中的示例：

原生 html：

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

【问题讨论】：

标题Why is a jQuery disabled element touchable?如何匹配This "somehow works. As the user can not select anything,？并且 id `但是对于您在图像中显示的灰色外观，该框仍然处于活动状态并且没有被禁用？您对外观或事件/交互有疑问吗？

您显然正在使用插件将<select> 转换为其他看起来更好的东西。当disabled 属性在标记中时，插件会看到它。当您在插件运行后更改属性时，它并不知道。 --- 你现在应该做的是编辑你发布的内容并指出它是什么插件以及启动它的代码......所以人们可以重现这个问题并提出一些建议。

更新了问题。 jQ mobile，它与外观有关，UI 现在建议用户可以单击它，但该元素以某种方式被禁用，因此简单地无法打开但看起来会。

【参考方案1】：

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

Selectmenu Widget: 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 提供的功能。

【讨论】：

实际上，出于所有实际目的，我认为仅 $('#filter_refn').attr('disabled', true) 就足够了，根据我过去的经验，我不知道一个实例当动态设置“禁用”属性而“禁用”属性没有相应更改时。当然，我很想知道并纠正如果真的存在这样的情况，即动态更改 HTML“禁用”属性但“禁用”属性以某种方式保持不变。

@hellopeach 如果未明确设置属性，则其值基于属性。如果设置了属性，则更改属性不会影响属性（除了绑定属性和属性的 html 元素和属性）see this fiddle。并且因为 jQuery mobile 对 select 小部件使用 none 输入元素，所以 disabled 属性和属性没有同步，并且由于您不知道 jQuery mobiles 是如何实现它的，所以 .attr('disabled', true) 可能还不够，因此您应该使用他们的 API。

谢谢。这有效并解决了我的问题。不幸的是，这些问题很快就被否决了，因为在我看来这是一个合法的问题，而您的帮助已经解决了这个问题。

@merlin 我没有投反对票，但如果我没记错的话，在您进行第一次更新之前，这个问题就得到了反对票。公平地说，在此之前并不清楚你在哪里问什么，也不清楚你使用了什么库。向下投票箭头工具提示显示：This question does not show any research effort; it is unclear or not useful。可以对研究工作进行争论，因为文档提供了一个可行的解决方案来禁用组件描述中的小部件，但我不认为反对票与此有关。

【参考方案2】：

您的 HTML 文档类型是如何声明的？在 XHTML 中，“禁用”属性必须有一个值，而在 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 要求“禁用”属性具有值，您可以使用 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">

看看是不是你想要的？

【讨论】：

disabled 属性无论如何都是布尔值...如果它存在于标记中，则无论传递给它的字符串如何，它都被认为是真的。试试disabled="bullshit"...它有效。

我的观点是，在 XHMTL 中它需要有一个值，而在 HTML 中则没有，并且某些浏览器可能会由于浏览器引擎版本的一些奇怪组合而产生奇怪的行为, doctype 声明，以及是否设置了 disabled 属性的值。既然发帖人说“可触摸”，我猜他正在用移动浏览器进行测试，这使事情变得更加复杂，因为一些android手机的内置浏览器卡在了一些无法升级的古怪版本的webkit引擎并且有一些像这样的奇怪问题。

反正这不是重点... OP 正在使用 jQuery... 属性与元素的属性绑定... 使用 jQuery .prop()，属性没有改变，只有元素的属性是。

另外，<select> 上肯定有一个插件实例化... 这就是 OP 问题。

@Louys Patrice Bessette，下次评论前请仔细阅读，重点是，jQuery.prop()和jQuery.attr()对浏览器产生不同的结果，prop()产生 虽然 attr 产生 而我过去曾看到某些古怪的移动浏览器会为这类东西产生奇怪的结果，你可以自己试试看，这就是重点。