Internet Explorer 11 - 无法检查角度 5 中的输入类型复选框答案

【问题标题】：Internet Explorer 11 - Not able to check input type checkbox in angular 5Internet Explorer 11 - 无法检查角度 5 中的输入类型复选框
【发布时间】：2018-08-13 02:50:16
【问题描述】：

使用输入类型复选框和 ngmodel、ngmodelchange、angular 的选中属性。请在下方查看。

<input type="checkbox" [checked]="item.selected" [(ngModel)]="item.selected"/>

复选框在 google chrome 和 firefox 中运行良好，但是当我在 IE11 中测试时，我无法选中该复选框。

但是当我连续双击时，复选框被选中。

注意：默认 html5 复选框按预期工作

<input type="checkbox" name="checkme">

我可以通过单击在 IE 11 中正常检查复选框的任何想法。遇到此问题的任何人，如果有人解决了问题，请告诉我。

提前致谢。

【问题讨论】：

你是否启用了 polyfills 中需要的所有库。

标签： angular checkbox input internet-explorer-11 angular5

【解决方案1】：

您是否对 item.selected 使用布尔值？尝试将其设置为字符串“已检查”，也许。

【讨论】：

谢谢，是的，当我将 [(ngModel)]="item.selected" 从布尔值更改为其他数据类型时，它正在工作。

【解决方案2】：

AngularJS 也有类似的问题

我有一个ng-repeat 用于表格行来显示数据，并且在表格行内我还有一个复选框。用户可以单击复选框或行本身来选择它作为要包含的选项的一部分（在将这些选项带到应用程序的下一阶段之前）

<tr ng-repeat="obj in new_add_ons track by $index" ng-class="{selected: obj.Selected}" ng-click="click_table_row('new_add_ons',$index)">
    <td style="width:5px; padding: 0px !important;">
        <div class="form-check">
            <input class="form-check-input checkbox" type="checkbox" ng-click="$event.stopPropagation();" ng-model="obj.Selected" id="{{'defaultCheck' + $index}}">
        </div>
    </td>
    <td>{{obj.QTY}}</td>
    <td>{{obj.PN}}</td>
    <td>{{obj.DESC}}</td>
    <td>{{obj.NOTES}}</td>
</tr>

使用 Chrome，我不需要输入标签上的 ng-click 属性 - ng-model 足以将复选框状态（选中或未选中）链接到数据（每个对象数组都带有 obj.Selected true 或 false） .就像您观察到的那样，我需要双击 IE11，但只需单击 Chrome 等。

使用$event.stopPropagation(); 添加ng-click 事件后，输入在IE 和chrome 中按预期运行。

发生的情况是，当用户单击复选框时，它还触发了行单击事件，并且由于该事件切换了 obj.Selected 状态 - 本质上它切换了两次 - 一次来自复选框本身，然后它返回到原始值与行点击事件。通过在每次单击复选框时运行$event.stopPropagation();，不会触发行单击事件，结果是我们所期望的。

【讨论】：

【解决方案3】：

它是因为[(ngModel)]="item.selected" 属性，如果你只把属性[checked]="item.selected" 工作正常。

【讨论】：