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

Question

我想根据某些条件禁用HTML表单元素的一部分.这似乎是理想的方法:

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

现在,这两个输入被禁用.然而,这似乎完全被IE8所取代.输入显示已禁用,但我仍然可以键入它们.

小提琴(不是如果的jsfiddle实际工作中的IE8)

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

Answer 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>

Answer 2

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

来源

在 IE7 和 IE8 中，该属性仅禁用 <legend> 中的表单元素。

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