Internet Explorer 11 - 无法检查 angular 5 中的输入类型复选框

Question

使用输入类型复选框和 ngmodel、ngmodelchange、checked angular 的属性。请检查下面。

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

复选框在 google chrome 和 firefox 中工作正常，但是当我在 IE11 中测试时，我无法选中复选框。

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

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

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

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

提前致谢。

Answer 1

您是否为 item.selected 使用布尔值？尝试将其设置为字符串'checked'，也许。

Answer 2

我遇到了与 AngularJS

类似的问题

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

<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 足以 link 复选框状态（选中或未选中）数据（每个对象的数组 obj.Selected true 或 false）。正如您观察到的那样，我需要在 IE11 中双击，但在 Chrome 等

中只需单击一次

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

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

Answer 3

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

Internet Explorer 11 - 无法检查 angular 5 中的输入类型复选框

Internet Explorer 11 - Not able to check input type checkbox in angular 5

checkbox

input

internet-explorer-11

angular

angular5