How to select checkbox based on another checkbox state in AngularJs?

Question

Below is my scenario.

I have 2 checkboxes named A & B which are inside the ng-repeat element. The possible states of these 2 checkboxes are

When A is truthy, B can be either truthy or falsey

When A is falsey, B can never be truthy.

Below is my code which I tried with ng-checked, but as ng-checked doesn't allow ng-model along with it, I couldn't come up with a solution.

NOTE: I need to capture both these 2 checkboxes state in my Model

<tbody>
   <tr ng-repeat="vehicle in editor.vehicles">                                        
      <td>
         <v-check name="A" ng-model="vehicle.modelA"></v-check>
      </td>
      <td>
         <v-check name="B" ng-model="vehicle.modelB" ng-checked="vehicle.modelA"></v-check>
      </td>
   </tr>
</tbody>

Above code uses a directive v-check which is nothing but a checkbox.

EDIT: The template of my v-check directive: <label class='checkbox-inline'><input ng-model='ngModel' type='checkbox'>{{text}}</label>

Thanks in advance.

Are you sure that your checkbox <input> tag is not wrapped around a <div> in your directive? In that case ng-checked might not work. — ccg
– ccg, Commented Sep 9, 2015 at 6:10
@ccg - Edited my question to include the template from the directive — Karthik
– Karthik, Commented Sep 9, 2015 at 6:16

Karthik · Accepted Answer · 2015-09-11 04:02:29Z

3

Below is my solution to the problem, which also fixes the scenario as suggested by @entre in his comment.

<tbody>
 <tr ng-repeat="vehicle in editor.vehicles">                                        
  <td>
     <v-check name="A" ng-model="vehicle.modelA" ng-click="vehicle.modelB=false"></v-check>
  </td>
  <td>
     <v-check name="B" ng-model="vehicle.modelB" ng-disabled="!vehicle.modelA"></v-check>
  </td>
 </tr>
</tbody>

answered Sep 11, 2015 at 4:02

Karthik

1,0742 gold badges16 silver badges35 bronze badges

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

Comments

z0r0 · Accepted Answer · 2015-09-09 06:33:24Z

1

use ng-disabled for B:

<tbody>
   <tr ng-repeat="vehicle in editor.vehicles">                                        
      <td>
         <v-check name="A" ng-model="vehicle.modelA"></v-check>
      </td>
      <td>
         <v-check name="B" ng-model="vehicle.modelB" ng-disabled="!vehicle.modelA"></v-check>
      </td>
   </tr>
</tbody>

I already tested this code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example54-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>



</head>
<body ng-app="">
  <label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
  <input type="checkbox" ng-model="button" ng-disabled="checked">
 </body>
</html>

edited Sep 9, 2015 at 6:33

answered Sep 9, 2015 at 6:14

z0r0

6664 silver badges15 bronze badges

1 Comment

ccg Over a year ago

It should be ng-disabled="!vehicle.modelA", right?

Collectives™ on Stack Overflow

How to select checkbox based on another checkbox state in AngularJs?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related