如何使用 jQuery 禁用 div 或 table 中的所有元素

Posted 2023-02-22

【中文标题】如何使用 jQuery 禁用 div 或 table 中的所有元素

【英文标题】：How to disable all Element inside a div or table using jQuery

【发布时间】：2012-01-14 21:15:52

【问题描述】：

我有一个包含多个文本框和按钮的表格。我通过以下代码使用 jquery 禁用了我的表格：

 $("#tbl").attr("disabled", "disabled");

我的表格被禁用，但是当我双击按钮时，它变为启用，我也可以在我的文本框中输入字符。如何禁用表格内的所有控件？

谢谢

【问题讨论】：

循环遍历表中的所有子元素并禁用它们，这是我的建议。

【参考方案1】：

您必须遍历并禁用所有相关元素。

$("#tbl").find("input,button,textarea,select").attr("disabled", "disabled");

【讨论】：

这还会禁用#tbl 还是独立的？

在表上指定禁用没有意义：w3.org/TR/html5/tabular-data.html#the-table-element

使用$("#tbl :input").attr("disabled", "disabled");会容易得多

致 gdoron：因为 :input 是一个 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :input 的查询不能利用原生 DOM querySelectorAll() 方法提供的性能提升。为了在使用 :input 选择元素时获得最佳性能，首先使用纯 CSS 选择器选择元素，然后使用 .filter(":input")

【参考方案2】：

使用 div 对整个表格进行分层，实质上使其“不可点击”。为此检查 BlockUI 插件。

在http://malsup.com/jquery/block/#overview了解更多信息

或参考已经讨论过的话题 Disabling controls within a table - JQuery/javascript

【参考方案3】：

我认为下面的代码也会很有用

$("YOUR_TABLE").find("*").attr("disabled", "disabled");

【参考方案4】：

请试试这个

$("#tbl *").attr("disabled",disabled");

例如：

http://jsfiddle.net/zafqd/

【讨论】：

Gads 没有。这不仅速度慢，而且会将禁用的属性应用于<p> 和<img> 等随机事物

使用$("#tbl :input").attr("disabled", "disabled");会容易得多