Programmatically unchecking checkbox does not update angular model

Question

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.

tymeJV · Accepted Answer · 2014-07-25 20:09:31Z

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

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

The Angular code you need:

$scope.model.property = false;

edited Jul 25, 2014 at 20:09

tymeJV

105k14 gold badges165 silver badges158 bronze badges

answered Jul 25, 2014 at 20:00

Bruno Lemos

9,2835 gold badges42 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lazyProgrammer01 Over a year ago

Hi .. I am facing a similar problem... but when the checkbox is initially selected, unchecking the selected checkbox doesn't update the ng-model value. It only gets fired once the box has been checked and further on. Would be of great help if there a way to capture the initial checkbox deselect.

craigb · Accepted Answer · 2014-07-26 05:18:42Z

1

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.

answered Jul 26, 2014 at 5:18

craigb

16.9k7 gold badges54 silver badges63 bronze badges

Collectives™ on Stack Overflow

Programmatically unchecking checkbox does not update angular model

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related