16

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

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

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

小提琴（不像 JsFiddle 真的在 IE8 中工作）

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

4

5 回答 5

11

好的，我提出了一个特定于 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>
于 2013-03-26T20:55:58.003 回答
4

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

资源

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

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

于 2013-03-26T20:49:08.350 回答
2

使用 jQuery 的解决方案：

var disabledFiedset=$('fieldset[disabled]');
$('input',disabledFiedset).attr('disabled','disabled');
于 2013-03-26T20:38:04.520 回答
1
于 2013-03-26T20:39:32.720 回答
0

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

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

于 2013-04-04T07:04:20.653 回答