title: Require input value if checkbox checked
body: <p>I have a series of rows with one checkbox per. With each row are several inputs. I already have validation that requires at least one checkbox in all the rows be checked. However, I am thus far unable to require the inputs have a value ONLY for the checkbox(es) checked.</p>
  
  <p><img src="https://i.stack.imgur.com/Bfmmo.jpg" alt="enter image description here"></p>
  
  <p><strong>The HTML:</strong></p>
  
  <pre><code>&lt;div style="width: 100%;"&gt;
  &lt;checkboxgroup-Wheelbase min-required="1"&gt;          
      &lt;table style="width: 100%"&gt;                                
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;table style="width: 97%;"&gt;
                      &lt;tr&gt;
                          &lt;th style="width: 220px;" class="wheelbaseHeaderCell"&gt;Wheelbase&lt;br /&gt;&lt;span style="font-weight: 400;"&gt;(choose min of 1)&lt;/span&gt;&lt;/th&gt;
                          &lt;th class="wheelbaseHeaderCell"&gt;Payload&lt;br /&gt;[ pounds ]&lt;/th&gt;
                          &lt;th class="wheelbaseHeaderCell"&gt;Length&lt;br /&gt;[ inches ]&lt;/th&gt;
                          &lt;th class="wheelbaseHeaderCell"&gt;Height&lt;br /&gt;[ inches ]&lt;/th&gt;
                          &lt;th class="wheelbaseHeaderCell"&gt;Weight&lt;br /&gt;[ pounds ]&lt;/th&gt;
                          &lt;th class="wheelbaseHeaderCell"&gt;Turn Radius&lt;br /&gt;[ feet ]&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="height: 5px;"&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div style="height: 170px; overflow: auto;"&gt;
                      &lt;table style="width: 100%;"&gt;
                          &lt;tr class="rowGroup" ng-repeat="wheelbase in wheelbases" data-rowParent="wheelbase[wheelbase.Id]"&gt;
                              &lt;td class="wheelbaseCell" style="padding-left: 10px;" id="{{wheelbase.Id}}"&gt;
                                  &lt;!--Wheelbase--&gt;                                    
                                  &lt;label class="checkbox" for="{{wheelbase.Id}}" style="text-align: left; width: 200px;"&gt;  
                                      {{wheelbase.WheelbaseGrade}} - {{wheelbase.Inches}} inches
                                      &lt;input ng-model="wheelbase.checked" id="wheelbase{{wheelbase.Id}}" type="checkbox"  /&gt;&lt;/label&gt;
                              &lt;/td&gt;
                              &lt;td &gt;
                                  &lt;!--Payload Capacity--&gt;
                                  &lt;span style="display: inline-block;" ng-controller="PayloadCapacitiesCtrl"&gt;
                                      &lt;input ng-model="payloadCapacity.Pounds" data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked" /&gt;
                                  &lt;/span&gt;                                                                
                              &lt;/td&gt;                                
                              &lt;td &gt;
                                  &lt;!--Length--&gt;
                                  &lt;span style="display: inline-block;" ng-controller="VehicleLengthCtrl"&gt;
                                      &lt;input data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked"/&gt;
                                  &lt;/span&gt;                                
                              &lt;/td&gt;
                              &lt;td &gt;
                                  &lt;!--Height--&gt;
                                  &lt;span style="display: inline-block;" ng-controller="VehicleHeightCtrl"&gt;
                                      &lt;input data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked"/&gt;
                                  &lt;/span&gt;                                
                              &lt;/td&gt;
                              &lt;td &gt;
                                  &lt;!--Weight--&gt;
                                  &lt;span style="display: inline-block;" ng-controller="VehicleWeightCtrl"&gt;
                                      &lt;input data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0" ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked"/&gt;
                                  &lt;/span&gt;                                
                              &lt;/td&gt;
                              &lt;td &gt;
                                  &lt;!--Turning Radii --&gt;
                                  &lt;span style="display: inline-block;" ng-controller="TurningRadiiCtrl"&gt;
                                      &lt;input data-rowChild="{{wheelbase[wheelbase.Id]}}" type="number" style="width: 80px;" min="0"  ng-class="getClass({{wheelbase.Id}})" ng-disabled="!wheelbase.checked"/&gt;
                                  &lt;/span&gt;                                
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;  
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/checkboxgroup-Wheelbase&gt;
  &lt;span class="hint" style="margin: 0 0 0 -35px; text-align: center; width: 100%;"&gt;         
      &lt;button style="padding-top: 5px; ;" class="addNew"  ng-click="openDialog()"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt; [ add new wheelbase ]&lt;/button&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>The directive requiring at least one checkbox be checked:</strong></p>
  
  <pre><code>.directive('checkboxgroupWheelbase', function() {
      return {
          restrict: 'E',
          controller: function($scope, $attrs) {
              var self = this;
              var ngModels = [];
              var minRequired;
              self.validate = function() {
                  var checkedCount = 0;
                  angular.forEach(ngModels, function(ngModel) {
                      if (ngModel.$modelValue) {
                          checkedCount++;
                      }
                  });
                  console.log('minRequired', minRequired);
                  console.log('checkedCount', checkedCount);
                  var minRequiredValidity = checkedCount &gt;= minRequired;
                  angular.forEach(ngModels, function(ngModel) {
                      ngModel.$setValidity('checkboxgroupWheelbase-minRequired', minRequiredValidity, self);
                  });
              };
  
              self.register = function(ngModel) {
                  ngModels.push(ngModel);
              };
  
              self.deregister = function(ngModel) {
                  var index = this.ngModels.indexOf(ngModel);
                  if (index != -1) {
                      this.ngModels.splice(index, 1);
                  }
              };
  
              $scope.$watch($attrs.minRequired, function(value) {
                  minRequired = parseInt(value, 10);
                  self.validate();
              });
          }
      };
  })
  </code></pre>
  
  <p>Is there a simple, elegant way to require the input fields of those checkboxes checked be required? It appears straight forward in JQuery via "rules" but I have not found a way to do this thru AngularJs. Someone suggested to me to use sub-forms but I cannot envision its implimentation.</p>
  
  <p><strong>In Case I was not Clear Enough:</strong></p>
  
  <p>For any row to which the respective checkbox is checked, all the inputs of that row are required to have a value. So, If the checkboxes of say rows 1,3 and 5 are checked, then the inputs of rows 1,3 and 5 require value. If a row's checkbox is checked, that same row's input require a value. If that row's checkbox is not checked, those inputs are not required. And in clearing that up, it made me think a wise thing would be for all inputs to be disabled till their respective wheelbase checkbox is checked.</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I would like to thank user2104976  for making me think about a better user experience insofar as making sure input values are not added when the respective wheelbase checkbox is not checked, so I implemented this </p>
  
  <pre><code> **"ng-disabled="!wheelbase.checked"** 
  </code></pre>
  
  <p>in each of the respective inputs. Thanks dude!! Now how about solving my original problem, LOL!!</p>