CODEWITHSUNDEEP
javascriptangularjscheckbox
GRowing
GRowing

Reputation: 4727

Angularjs - disabling AND unchecking a checked box

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

Upvotes: 11

Views: 40217

Answers (2)

user677526
user677526

Reputation:

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.

Upvotes: 14

meriadec
meriadec

Reputation: 2983

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

Upvotes: 4

Related Questions