CODEWITHSUNDEEP
angularcheckboxinputinternet-explorer-11angular5
Dinesh N.K
Dinesh N.K

Reputation: 71

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

Using input type checkbox and ngmodel, ngmodelchange, checked attribute of angular. Please check below.

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

Checkbox is working fine in google chrome and firefox, but when i test in IE11, I'm not able to check the checkbox.

But when i double click continuously, then the checkbox got checked.

Note: Default html5 checkbox is working as expected

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

Any ideas that i can make checkbox to be checked by single click as normal in IE 11. Anyone facing this issue and let me know if issue fixed by anyone.

Thanks in advance.

Upvotes: 2

Views: 4152

Answers (3)

Mar&#237;a Cristina Fern&#225;ndez L&#243;pez
Mar&#237;a Cristina Fern&#225;ndez L&#243;pez

Reputation: 437

its because of the property [(ngModel)]="item.selected" if you only put the property [checked]="item.selected" works fine.

Upvotes: 0

Alex L
Alex L

Reputation: 4241

I had a similar issue with AngularJS

I had a ng-repeat for table rows to display the data and inside the table rows I had also a checkbox. The user can click the checkbox or the row itself to select it as part of the options to be included (before taking those options to the next stage of the app)

<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>

With Chrome I did not need the ng-click attribute on the input tag - ng-model was enough to link the checkbox state (checked or not) to the data (array of objects each with obj.Selected true or false). Like you observed I needed a double click with IE11 but only a single click with Chrome etc.

After adding the ng-click event with $event.stopPropagation(); the input functioned as expected in IE and chrome.

What was happening was that as the user clicked the checkbox it also fired the row click event and since that event toggles the obj.Selected state - essentially it toggled twice - once from the checkbox itself and then it returned to the original value with the row click event. By running $event.stopPropagation(); each time the checkbox is clicked, the row click event will not be fired and the result is what we would expect.

Upvotes: 0

standby954
standby954

Reputation: 209

Are you using boolean value for item.selected? Try to set it as a string 'checked', maybe.

Upvotes: 1

Related Questions