javascript - 有没有办法一次禁用一堆表单元素？

Question

我想根据某些条件禁用一部分 HTML 表单元素。这似乎是实现这一目标的理想方式:

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

现在，这两个输入被禁用。然而，这似乎在 IE8 上完全令人厌烦。输入似乎已禁用，但我仍然可以输入它们。

Fiddle (不像 JsFiddle 实际上 在 IE8 中工作)

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

Answer 1

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

首先，我创建了一个 Knockout 绑定(bind):

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

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

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

然后您可以这样使用绑定(bind):

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