javascript - "disabling"(灰色文本，无鼠标/键盘)容器内的 jQuery UI 小部件和常规 HTML

Question

我有一个包含许多表单的应用程序，其中包含在未选中时禁用表单部分的复选框。为了使这些表单更易于维护，我想创建一个方法，我可以使用它来“禁用”容器(例如，包含表单 UI 的 DIV)，其中“禁用”的意思是:

1. 禁用所有表单输入字段(使用 HTML disabled 属性)
2. 所有文本通过将其变为灰色来“禁用”(#999)
3. 没有任何元素(尤其是像标签这样的 jQuery 小部件)会响应键盘或鼠标输入

对于 #1，我使用 jQuery 将 disabled 属性应用于每个 input、select 和 textarea。很简单。

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

但是对于 jQuery UI 小部件，是否有通用的方法来“禁用”它们，这样我就不必构建单独的 CSS 类和/或脚本来处理禁用每种不同类型的小部件？例如，我能否应用特定类或调用特定方法来禁用任何类型的遵循 jQuery UI 编码标准的 jQuery UI 小部件？

我也坚持#3。防止容器内的 HTML 响应任何键盘或鼠标输入(尤其是包括 jQuery UI 小部件)的通用方法是什么？

Answer 1

我创建了一个 jquery 小部件来做到这一点。我只是把它放在 Github 上。我在我工作的应用程序中使用它并且它做得很好。 如果您愿意，可以自由尝试。 (http://dougestep.com/dme/jquery-disabler-widget)。