Angularjs - disabling AND unchecking a checked box

Question

I have a complex set of checkboxes in groups filled with data from multidimensional arrays and there are some specific things that need to happen with them... I extracted the minimum of what I need so I will try to explain

In this fiddle

http://jsfiddle.net/EVZUV/

the first checkbox is enabled and the second is disabled. When the first checkbox is checked the second becomes enabled. What I am trying to get is to UNCHECK the second box if it is becomes disabled again when the first checkbox is unchecked.

Here is the code I have that almost works

<input type="checkbox" ng-model="disablelist" ng-click="checkitems">Check this box to enable the other.. <br><br>
<input type="checkbox" ng-disabled="!disablelist" ng-checked="checkitems">When this checkbox is disabled it also must get unchecked

I am just getting intong-js and some ideas are pretty "whaaa .." to me,, but it looks good so I am persisting for now.

Thanks!!

Answer 1

Simple solution here: http://jsfiddle.net/7mKtF/2/

HTML:

<div ng-app="myApp">
    <input type="checkbox" ng-model="disablelist">Check this box to enable the other.. <br><br>
    <input type="checkbox" ng-disabled="!disablelist" ng-checked="disablelist && 0">When this checkbox is disabled it also must get unchecked
</div>

JS:

var app = angular.module('myApp', []);

Basically, I've updated your ng-checked statement to include the disablelist property. Using boolean logic, the second checkbox will evaluate to false if disablelist is false.

EDIT:

Also worth noting that the way you currently have it, your ng-click binding actually doesn't do anything. You would want to use ng-click to call a function variable, using argument parentheses.

Answer 2

You can do it by assigning a model to your second checkbox, then reset it when you click on first checkbox.

HTML :

<input type="checkbox" ng-model="disablelist" ng-click="otherOption = false" /> Check this box to enable the other..
<input type="checkbox" ng-model="otherOption" ng-disabled="!disablelist" ng-checked="!!otherOption && !disableList" /> When this checkbox is disabled it also must get unckeched

Check the result in this jsFiddle