javascript - Programmatically unchecking checkbox does not update angular model - Stack Overflow

admin管理员组

文章数量:1406919

I am using the following code to programmatically uncheck a checkbox:

$('#someid').removeAttr('checked');

Here is the checkbox that is bound to an Angular model:

<input id="someid" ng-model="model.property" type="checkbox" value="true">

I can see that the checkbox is indeed unchecking. Why is the Angular model property not also updating (changing from true to false) and how can I obtain this desired behavior? I can update the model and have the checkbox update no problem.

I am using the following code to programmatically uncheck a checkbox:

$('#someid').removeAttr('checked');

Here is the checkbox that is bound to an Angular model:

<input id="someid" ng-model="model.property" type="checkbox" value="true">

I can see that the checkbox is indeed unchecking. Why is the Angular model property not also updating (changing from true to false) and how can I obtain this desired behavior? I can update the model and have the checkbox update no problem.

• javascript
• jquery
• angularjs

Share Improve this question Follow asked Jul 25, 2014 at 19:58 MarkusJMarkusJ 8722 silver badges88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

If you are using Angular, it's expected that you don't manipulate the DOM this way. You have to change the angular model variable, and let Angular make the DOM changes.

Study the ToDo List example at angularjs

Tip: I think you really don't need jQuery anymore!

The Angular code you need:

$scope.model.property = false;

Your use of jQuery is breaking anglers binding to the DOM. If you need to uncheck something change the value on the model that is bound to the checkbox:

$scope.model = { isChecked: true };

bound to:

<input type="checkbox" ng-model="model.isChecked">

to "uncheck":

$scope.model.isChecked = false;

No need for jQuery.

本文标签： javascriptProgrammatically unchecking checkbox does not update angular modelStack Overflow