"禁用“;(灰色文本，没有鼠标/键盘）jQueryUI小部件和容器中的常规HTML

"disabling" (gray text, no mouse/keyboard) jQuery UI widgets and regular HTML inside a container

本文关键字：小部 jQueryUI HTML 常规 键盘 禁用 quot 灰色 文本 鼠标      更新时间：2023-09-26

我有一个包含许多表单的应用程序，这些表单包含复选框，在取消选中时会禁用表单的部分。为了使这些表单更容易维护，我想创建一个可以用来"；禁用"；容器（例如包含表单UI的DIV）；禁用"；表示：

  1. 所有表单输入字段都被禁用（使用HTML disabled属性）
  2. 所有文本都是"；暗黑的"；通过将其变灰（#999）
  3. 没有任何元素（尤其是像选项卡这样的jQuery小部件）会对键盘或鼠标输入做出响应

对于#1，我使用jQuery将disabled属性应用于每个input、select和textarea。容易的

对于#2，我将向容器应用一个CSS类（.disabled {color:#999 !important}）。对于我自己的控件（例如链接按钮），我添加了额外的CSS规则来处理额外的禁用操作，比如像真正的按钮一样将背景变成不同的颜色

但是对于jQueryUI窗口小部件，是否有一种通用的方法"；禁用"；这样我就不必构建单独的CSS类和/或脚本来处理禁用每种不同类型的小部件了？例如，我可以应用特定的类或调用特定的方法来禁用任何一种遵循jQuery UI编码标准的jQuery UI小部件吗？

我也被困在第三位。有什么通用方法可以防止容器中的HTML响应任何键盘或鼠标输入，尤其是包括jQueryUI小部件？

我创建了一个jquery小部件来实现这一点。我刚把它放在Github上。我正在我工作的应用程序中使用它，它做得很好。如果你愿意，你可以自由尝试。（http://dougestep.com/dme/jquery-disabler-widget）。

作为所有jQuery UI窗口小部件的基础，窗口小部件工厂似乎至少尝试烘焙一些禁用的支持，您可以这样使用：

$(dialogEl).dialog("disable");

基本功能添加了ui-state-disabled类和aria-disabled属性，并且不激发任何处理程序。

可能有些小部件在特定情况下没有正确覆盖这一点；你需要测试一下。但这似乎在大多数情况下都有效。

备选方案：

应用ui-state-disabled类可能会带来一些好处，但它可能只适用于样式，而不会阻止任何响应。

在某些浏览器中阻止响应的一种方法是pointer-events: none，但这不是跨浏览器的，也有点像黑客攻击（例如，不确定它是否具有您想要的键盘行为）。

最好的方法是在所有具有onclick和onmouseover事件但返回false的事件之上放置一个不可见的覆盖。这可能有点尴尬，但肯定是最有效的。

相关文章：