jquery - 如何在 jQuery 中禁用字段集中的所有元素？

Question

我的页面上有 2 个<fieldset>，但其中一个应该根据某些用户的选择禁用所有它的元素。

字段集包含文本输入、选择和链接。有没有办法禁用所有这些而不是一个一个禁用它们？

Answer 1

使用儿童选择器怎么样？

$("#myfieldeset").children().attr("disabled", "disabled");

您还可以过滤子项选择：

$("#myfieldeset").children("a,input");

Answer 2

您可以设置的disabled属性fieldset。

来自MDN：

如果设置了此布尔属性，则作为其后代的表单控件（其第一个可选元素的后代除外）将被禁用，即不可编辑。他们不会收到任何浏览事件，例如鼠标点击或与焦点相关的事件。浏览器通常会将此类控件显示为灰色。

---

HTML：<fieldset disabled> ... </fieldset>

查询：$('#myfieldset').prop('disabled', true);

JS：document.getElementById('#myFieldset').disabled = true;

---

IE 注意：

由于一些错误，这在 Internet Explorer 上不能正常工作，但在其他任何地方（包括Edge）都可以正常工作。

简而言之，文本和文件输入没有正确禁用，用户仍然可以与它们交互。

如果这是一个交易破坏者，您需要进入 并将disabled属性放在<fieldset>的后代表单控件上，如此处其他答案中所述。

---

浏览器支持信息：http ://caniuse.com/#feat=fieldset-disabled

Answer 3

假设您在要禁用任何输入元素的字段集上设置了 class="disableMe"，​​那么以下代码应该可以满足您的需要：

$('fieldset.disableMe :input').attr('disabled', true)

Answer 4

你为什么不直接使用：

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

它对我有用。它很好地禁用了所有儿童输入。

编辑：请注意， disabled 属性只能应用于 HTML5 中的 fieldset 元素（请参阅 merryprankster 评论）。奇怪的是，它确实可以与 Firefox 和 Opera 以外的其他浏览器一起使用，例如 Chrome 和 Internet Explorer（经过测试的 IE7 和 IE8）。

Answer 5

除了其他人发布的内容：

使用.prop()代替.attr()：

$('#myfieldset').prop('disabled',true)

关于 DOM 更正确。

而且它似乎不适用于验证。Firefox 和 chrome 都不允许我在禁用的字段集中提交带有未填充的“必填”输入的表单，但也不提供有关如何完成表单的任何说明。

Answer 6

如果由于某种原因您无法将 ID 添加到字段集（通常是首选），您始终可以这样做来隐藏它的所有子元素：

$('fieldset:first > *').attr('disabled','disabled');