Angularjs 现场设置和禁用所有子输入-解决IE问题

我有一个字段集，它下面有一个ui视图。
每个视图下都有很多字段（字段是包装输入的指令）

它看起来像这样：

<fieldset ng-disabled='myCondition'>
   <div ui-view></div> // this changes with lot's of fields that look like <div field='text-box'></div>
</fieldset>

document.body.onmousedown = function(e) {

    if (!e) e = window.event;

    var target = e.target || e.srcElement;

    if (fieldset.contains(target) && fieldset.disabled) {

        // no need to do this on body!!! do it on fieldset itself
        /*if (e.preventDefault) {

            e.preventDefault();
        }
        else {*/

            // this is useless
            //e.returnValue = false;

            // but this works
            fieldset.setAttribute("UNSELECTABLE", "on");

            window.setTimeout(function() { target.setAttribute("UNSELECTABLE", ""); },4);
        /*}*/

        return false;
    }
}

//这会随着许多字段的变化而变化

现在，这非常有效，除了IE，所有浏览器上的字段都被禁用
我在谷歌上做了一些研究，发现ie不支持fieldset+disabled，我正在寻找一个快速的解决方法

---

我尝试过一些非常接近但并不完美的方法，我想我不是第一个需要解决方案的人（即使我在谷歌上没有找到任何解决方案）。

我遇到了完全相同的问题，我提出了以下指令：

angular.module('module').directive('fieldset', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {

            if (angular.isUndefined(element.prop('disabled'))) { //only watch if the browser doesn't support disabled on fieldsets
                scope.$watch(function () { return element.attr('disabled'); }, function (disabled) {
                    element.find('input, select, textarea').prop('disabled', disabled)
                });
            }
        }
    }
});

不过，检测功能存在缺陷。在IEs上，fieldset元素（实际上似乎所有元素）的“disabled”属性设置为false

---

编辑：我刚刚意识到它在“ng视图”中。在加载视图后，您可能需要处理$timeout以使其应用更改。或者，更简单的是，将字段集放在视图中。

似乎与IE问题相关，请参阅和相关（抱歉，目前不能发布超过2个链接）。 第一个将在下一个主要IE版本（Edge？）中修复。 第二个仍然开放

正如我所怀疑的，问题在于用户仍然可以点击禁用字段内的输入设置并编辑它们

如果是这样，IE 8+有一个“仅css”的解决方案，它在禁用的字段集上方创建透明覆盖，防止单击字段集

Microsoft Connect问题中介绍了解决方法

有，这表明了在行动中的变通方法

fieldset {
    /* to set absolute position for :after content */
    position: relative;
}
/* this will 'screen' all fieldset content from clicks */
fieldset[disabled]:after {

    content: ' ';
    position: absolute;
    z-index: 1;
    top: 0; right: 0; bottom: 0; left: 0;
    /* i don't know... it was necessary to set background */
    background: url( data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
}

该解决方案有一些限制，请参阅代码以了解详细信息

JavaScript有一些选项

似乎对于IE9+来说，如果禁用了字段集，您可以捕获字段集上的鼠标下降事件并调用e.preventDefault（）

fieldset.onmousedown = function(e) {

    if (!e) e = window.event;

    if (fieldset.disabled) {

        // for IE9+
        if (e.preventDefault) {

            e.preventDefault();
        }
        // for IE8-
        else {

            // actualy does not work
            //e.returnValue = false;
        }

        return false;
    }
}

对于IE8及以下版本，在禁用的字段集上捕获冒泡的mousedown事件是不可能的，甚至不会调用事件处理程序。但可以在字段集祖先上捕获它们，例如在documetn.body上。但同样，对于IE8，您不能通过阻止mousedown事件的默认操作来阻止元素被聚焦。有关详细信息，请参阅jQuery票证#10345（抱歉，不能发布超过2个链接）。您可以尝试使用UNSELECTABLE属性临时禁止元素获取焦点。大概是这样的：

<fieldset ng-disabled='myCondition'>
   <div ui-view></div> // this changes with lot's of fields that look like <div field='text-box'></div>
</fieldset>

document.body.onmousedown = function(e) {

    if (!e) e = window.event;

    var target = e.target || e.srcElement;

    if (fieldset.contains(target) && fieldset.disabled) {

        // no need to do this on body!!! do it on fieldset itself
        /*if (e.preventDefault) {

            e.preventDefault();
        }
        else {*/

            // this is useless
            //e.returnValue = false;

            // but this works
            fieldset.setAttribute("UNSELECTABLE", "on");

            window.setTimeout(function() { target.setAttribute("UNSELECTABLE", ""); },4);
        /*}*/

        return false;
    }
}

它现在有一行解决方案

虽然问题状态已修复，但仍未解决

但是，现在我们也可以使用

指针事件：none。它将禁用所有输入元素

fieldset[disabled] {
    pointer-events: none;
}

这是一个修复程序，用于禁用IE11中的字段集：

检测IE：

由于其他浏览器在“已禁用”字段的悬停处显示（已禁用（/）符号，所以此更改应仅适用于使用@media的IE

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
             fieldset[disabled] {
                 pointer-events: none;
                 }
            }

css工作得很好。我还将在禁用的字段集上添加不允许的游标。字段集[禁用]{光标：不允许；}非常感谢！你救了我一天。
z-index:1
与引导CSS一起使用时太少了。e、 g.
.input group.form control
和许多其他样式都位于z索引2、3和更高的位置。它与
10
的
z-index
配合使用效果非常好。节省了我一些时间，不用写JS之类的解决方法。链接页面已经不存在了。