有没有办法一次禁用一堆表单元素？答案

【问题标题】：Is there any way to disable a bunch of form elements at once?有没有办法一次禁用一堆表单元素？
【发布时间】：2013-03-16 19:46:45
【问题描述】：

我想根据某些条件禁用部分 HTML 表单元素。这似乎是做到这一点的理想方式：

<fieldset disabled>
    <input value="one" />
    <input value="two" />
</fieldset>

现在，这两个输入被禁用。但是，这在 IE8 上似乎完全无聊。输入出现已禁用，但我仍然可以输入它们。

Fiddle（不像 JsFiddle 实际上在 IE8 中工作）

是否有针对此问题的跨浏览器解决方案，无需将 disabled 添加到每个表单元素（这会使我的脚本复杂化）。我可能会做一些棘手的事情，比如在 jQuery 中选择 <fieldset>，然后在所有表单元素中选择 .each() 并禁用它们 - 但是，我实际上是使用 Knockout 绑定设置 disabled 属性，所以真的没有地方可以添加这样的代码。我最后的办法是使用自定义的 Knockout 绑定，它也会禁用所有的孩子，但是 le sigh。

【问题讨论】：

您可以使用覆盖来阻止单击输入，但这不会阻止对它们进行切换，因此您将与 tabindex 属性处于同一条船上。你可以绑定一个事件来阻止 keydown 发生，甚至是 focus 事件。
是的，我不太喜欢那种解决方案。另外，将其集成到 Knockout 模板中仍然很麻烦。我宁愿单独禁用每个元素。
@MikeChristensen：fieldset 在 IE8 中不是 borked。它只是不完全支持。 fieldset 是对 HTML5 的补充，IE8 确实支持很少的 HTML5 表单元素。请参阅 http://html5test.com results for IE8 fieldset 在 IE8 中仅部分支持。从结果中可以看出，不支持 element attributes。所以你最有可能想出一个替代方案。正如所建议的那样，叠加层可能是其中一种选择。虽然可能有一个 polyfill 可以在 IE8 中的字段集上工作。不过，这不是 100% 确定的。
@MikeChristensen：如果您必须支持 IE8，另一种解决方案是根本不使用任何 HTML5 元素。我不是想变得聪明。我只是建议它作为一种选择。我也不得不承认，这很奇怪，因为根据我在之前评论中链接的 HTML5 的上述测试结果，disabled attribute 应该在 IE8 中受支持。在运行 HTML5 测试的 IE8 上转到 http://html5test.com/ 时也会显示相同的结果，显示相同的结果。确实很奇怪。

标签： javascript jquery html forms knockout.js

【解决方案1】：

好的，我提出了一个特定于 Knockout.js 的实现，希望能帮助其他人。只需稍加努力，该解决方案就可能适用于其他解决方案和平台。

首先，我创建了一个 Knockout 绑定：

ko.bindingHandlers.allowEdit = {
   init: function(element, valueAccessor)
   {
      if(!valueAccessor())
      {
         element.disabled = true;
         element.readOnly = true;

         if(element.tagName === 'FIELDSET')
         {
            $(':input', element).attr('disabled', 'disabled');
         }
      }
   }
};

注意，如果您想允许更改此绑定，您还必须实现 update 方法。我没有这个要求。

然后您可以这样使用绑定：

<fieldset data-bind="allowEdit: someExpression">
   <input value="One" />
   <input value="Two" />
</fieldset>

【讨论】：

$('fieldset :input').attr('disabled', ''); 和 $('fieldset :input').removeAttr('disabled'); 似乎包括 textarea 和 select。您可能不需要单独指定它们：jsfiddle.net/CvafW/1 不过不确定在所有浏览器中是否都相同。
@FrançoisWahl - 是的，没错，你在那个.. 更新我的代码。
哦，当然 +1，看到这是一个似乎对您有用的解决方案，但也很可能对使用 knockoutJS 解决类似问题的未来用户有用。

【解决方案2】：

简而言之：否。这背后的原因是因为缺乏对 IE8 的支持以及 fieldset 元素上的 disabled 属性。

Source

在 IE7 和 IE8 中，该属性仅禁用。

恐怕您应该寻找自定义解决方案，例如其他用户的答案/您自己的自定义绑定。

【讨论】：

+1 表示来源。我正在查看http://html5test.com/compare/browser/ie08.html，其中声明支持disabled attribute，尽管element attributes 不支持。很混乱。我会记下你的那个链接。

【解决方案3】：

使用 jQuery 的解决方案：

var disabledFiedset=$('fieldset[disabled]');
$('input',disabledFiedset).attr('disabled','disabled');

【讨论】：

+1 因为我使用了您的部分解决方案。

【解决方案4】：

我能够在我的模型中使用一个名为 editable 的 observable 来做类似的事情，然后在我的输入中我使用了 data-bind="enable: editable”，这完全适用于 IE 7、8 和 9。

【讨论】：

当然可以，但是您必须在每个表单字段中都添加它。
是的，但它都由一个 observable 控制。

【解决方案5】：

为您的字段集标签提供 id（或者您也可以直接在 jquery 代码中使用标签名称）并使用以下代码使用 jquery 禁用该字段集中的所有字段。

$("#fieldset id" or "fieldset").children().attr("disabled", "disabled");

【讨论】：