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

Question

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

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

Answer 1

使用子选择器怎么样？

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

您还可以过滤子项选择：

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

Answer 2

您可以设置disabled的{​​{1}}属性。

来自MDN：

  

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

HTML ：fieldset

JQuery ：<fieldset disabled> ... </fieldset>

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

重要提示：由于存在一些错误，这在Internet Explorer上无法正常运行，但在其他任何地方都能正常运行（包括 Edge ）。

IE错误：1，2

tl; dr ：文字和文件输入无法正常停用，用户仍然可以与他们互动

如果这是一个交易破坏者，你需要进入字段集并将document.getElementById('#myFieldset').disabled = true;放在其后代上，如其他答案中所述。

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

Answer 3

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

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

Answer 4

为什么不使用：

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

它对我有用。它很好地禁用了所有孩子的输入。

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

Answer 5

除了其他人发布的内容：

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

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

关于DOM，它更正确。

它似乎不适用于验证。 firefox和chrome都不允许我提交表单中未填写的表格＆＃39; required＆＃39;输入已停用的字段集，但不提供有关如何填写表单的任何说明。

Answer 6

如果由于某种原因你无法在字段集中添加ID（通常是首选），你可以随时隐藏它的所有子元素：

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