AngularJS - ng-click - ng-class - toggle disabled/enabled

I have this table row:

<table>
<tr ng-repeat="truckWheelbase in truckWheelbases | orderBy:sortFunction" ng-click="toggleRow($index)">                            
   <td>
      <!--Wheelbase-->                    
      <label class="checkbox" for="{{truckWheelbase.Id}}">
         <input type="checkbox" ng-model="selection.Ids[truckWheelbase.Id]" id="{{truckWheelbase.Id}}">
            {{truckWheelbase.WheelBaseGrade}} - {{truckWheelbase.Inches}} inches
      </label>
   </td>
   <!--Payload-->  
   <td>
      <input id="{{truckWheelbase.Payload}}" type="number" ng-class="getClass({{truckWheelbase.Id}})">
   </td>
</tr>
             .......remaining rows ............
</table>

What I am trying to accomplish:

At the onset of page load all the controls for each table row are disabled except the check box controls in column 1.

When the user checks/unchecks the respective row's check box, all the controls in that row are enabled/disabled.

I am not having much success but I am sure ng-class is required and the toggleRow($index) in the controller will set the class to disabled="disabled" or just blank.

Any ideas?

Illustration:

enter image description here

bmleite

ng-disabled="!selection.Ids[truckWheelbase.Id]" does indeed disable all the controls on page load, but how do I implement ng-class="getClass({{truckWheelbase.Id}})" to enable on check box click?

I'm not sure what your toggleRow() function is doing exactly but I assume it is changing the selection.Ids object. If that's the case, you just need to use that same information to enable/disable the inputs. For that, use the ng-disabled directive:

<!--Payload-->  
<td>
    <input id="{{truckWheelbase.Payload}}" type="number" ng-class="getClass({{truckWheelbase.Id}})" 
           ng-disabled="!selection.Ids[truckWheelbase.Id]">
</td>