Question

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

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

现在，这两个输入被禁用。然而，这似乎完全被IE8所取代。输入出现已禁用，但我仍然可以输入它们。

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

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

Source

在IE7和IE8中，该属性仅禁用表单元素＆LT;传奇＆gt;。

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

Answer 3

使用jQuery的解决方案：

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

Answer 4

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

Answer 5

将id设置为fieldset标记（或者您也可以直接在jquery代码中使用标记名称）＆amp;使用以下代码使用jquery在该字段集中禁用所有字段。

$（“＃fieldset id”或“fieldset”）。children（）。attr（“disabled”，“disabled”）;

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

5 个答案: