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

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

Solution 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

Comments

[GRowing]

Thank you! I was cringing over the ng-click to begin with and I appreciate your input. If I may ask, where would be easiest to start getting into angular (because I ma finding that the documentation does not do much for me)

[GRowing]

Thanks for the input. Although not quite doing it in the context of my larger app, I learned something new too.

[jedd.ahyoung]

For me, honestly, I think I used the Angular homepage - Angular's documentation is pretty rough in areas, but I played around with examples on the homepage which got me far enough to get going. (I suppose it helped that I'm also working on a company codebase that's written extensively in Angular, so I had a lot of good examples there.)

[GRowing]

I guess it comes dowbn to fiddling with examples. Thanks a lot.

[jedd.ahyoung]

@Thanq It's the equivalent of the boolean "false", as that's what it evaluates to. When disableList is changed, Angular will evaluate the binding statement and read it as (true && false), which evaluates to false, unchecking the checkbox.