“禁用” （灰色文本，无鼠标/键盘）容器内的 jQuery UI 小部件和常规 HTML
我有一个包含许多表单的应用程序，其中包含未选中时禁用表单部分的复选框。为了使这些表单更易于维护，我想创建一个可用于“禁用”容器（例如包含表单 UI 的 DIV）的单一方法，其中“禁用”意味着：
- 禁用所有表单输入字段（使用HTML
disabled属性） - 所有文本都通过将其变成灰色来“禁用”（#999）
- 没有元素（特别是像选项卡这样的 jQuery 小部件）将响应键盘或鼠标输入
对于 #1，我正在使用jQuery 应用每个input、select 和textarea 都有disabled 属性。简单的。
对于#2，我将 CSS 类 (.disabled {color:#999 !important}) 应用于容器。对于我自己的控件（例如链接按钮），我添加了额外的 CSS 规则来处理额外的禁用操作，例如像真实按钮一样将背景变成不同的颜色。
但是对于 jQuery UI 小部件，是否有一种通用方法来“禁用”它们，这样我就不必构建单独的 CSS 类和/或脚本来处理禁用每种不同类型的小部件？例如，我可以应用特定的类或调用特定的方法来禁用任何遵循 jQuery UI 编码标准的 jQuery UI 小部件吗？
我也被困在#3 上。阻止容器内的 HTML 响应任何键盘或鼠标输入（尤其是 jQuery UI 小部件）的通用方法是什么？
I have an application with many forms which contain checkboxes that disable sections of the form when unchecked. To make these forms easier to maintain, I'd like to create a single method which I can use to "disable" a container (e.g. a DIV containing form UI), where "disable" means:
- all form input fields are disabled (using the HTML
disabledattribute) - all text is "diabled" by turning it gray (#999)
- no elements (especially jQuery widgets like tabs) will respond to keyboard or mouse input
For #1, I'm using jQuery to apply the disabled attribute to every input, select, and textarea. Easy.
For #2, I'm applying a CSS class (.disabled {color:#999 !important}) to the container. For my own controls (e.g. link buttons), I'm adding extra CSS rules to handle extra disabling actions, like turning backgrounds a different color like real buttons do.
But for jQuery UI widgets, is there a generic way to "disable" them so I won't have to build separate CSS classes and/or script to handle disabling each different kind of widget? For example, can I apply a particular class or call a specific method to disable any kind of jQuery UI widget which follows the jQuery UI coding standards?
I'm also stuck on #3. What's a generic way to prevent HTML inside a container from responding to any keyboard or mouse input, especially including jQuery UI widgets?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我创建了一个 jquery 小部件来做到这一点。我刚刚把它放到了Github上。我在我工作的应用程序中使用它，并且效果很好。
如果您愿意，可以自由尝试。 （http://dougestep.com/dme/jquery-disabler-widget）。
I created a jquery widget to do just that. I just put it on Github. I am using it in an application where I work and it is doing great.
You're free to try it out if you'd like. ( http://dougestep.com/dme/jquery-disabler-widget ).
看起来，作为所有 jQuery UI 小部件基础的小部件工厂，至少尝试加入一些 禁用的支持 您可以像这样使用：
基本功能 添加
ui-state-disabled类和aria-disabled属性，以及 不会触发任何处理程序。某些小部件可能无法针对其特定情况正确覆盖此设置；你需要测试。但这似乎在大多数情况下都有效。
替代方案：
您可能会通过应用
ui-state-disabled类，但它可能只适用于样式，而不会阻止任何响应。在某些浏览器中阻止响应的一种方法是
pointer-events: none，但这是 不是跨浏览器并且是一种黑客行为（例如，不确定它是否具有您想要的键盘行为）。It seems that the widget factory, used as the basis for all jQuery UI widgets, at least tries to bake in some disabled support that you can use like so:
The base functionality adds the
ui-state-disabledclass and thearia-disabledattribute, and doesn't fire any handlers.It's possible some widgets don't override this correctly for their particular cases; you'd need to test. But it seems likely this will work in most cases.
Alternatives:
You might get some mileage out of applying the
ui-state-disabledclass, but it will likely only work for styling, and not prevent any response.One way of preventing responses in some browsers is
pointer-events: none, but that's not cross browser and kind of a hack (for example, not sure if it has the keyboard behavior you want).最好的方法是在所有具有仅返回 false 的 onclick 和 onmouseover 事件的顶部放置一个不可见的覆盖层。这可能有点尴尬，但肯定是最有效的。
The best way is to put an invisible overlay on top of everything that has onclick and onmouseover events that just return false. It can be somewhat awkward, but it's certainly the most effective.