iCheck and knockout - enable binding doesn't show dependent checkbox as enabled

I have a checkbox for setAlarmValues that works fine. But when checked, the SetOutputCurrentPPLowValue & SetOutputCurrentPPHighValue checkboxed don't show like they are enabled. They can be clicked if the setAlarmValues is checked but they are greyed out and the cursor doesn't change on hover. When checking the element I can see it gets disabled or enabled but the class remains the same: icheckbox_square-blue disabled. I'm guessing this is the reason it doesn't work properly but how can I change it dynamically?

  <!-- ko if: $root.regData -->

  <div class="row">
    <div class="col-md-2">
      <label for="SetAlarmValues" class="control-label">@MSL.Core.Resource.Models.Well.SetAlarmValues:</label>
      <input type="checkbox" data-bind="iCheck: $root.regData().setAlarmValues, event: {ifChanged: $root.changeMade}" class="large-check" id="SetAlarmValuesCheck" title="@MSL.Core.Resource.Models.Well.SetAlarmValues" />

    </div>

  </div>

  <div class="col-md-6">
    <div class="row">
      <div class="col-md-3">
        <label for="SetOutputCurrentPP" class="control-label">Set Output Current PP:</label>
      </div>
    </div>
    <div class="row">
      <div class="col-md-1">
      </div>
      <div class="col-md-5 form-inline">
        <label for="SetOutputCurrentPPLowValue" class="control-label">@MSL.Core.Resource.Models.Well.OutputCurrentPPLowValue: </label>&nbsp;

        <input type="checkbox" data-bind="iCheck: $root.regData().setOutputCurrentPPLowValue, enable:  $root.regData().setAlarmValues()" class="large-check" id="SetOutputCurrentPPLowValue" title="@MSL.Core.Resource.Models.Well.SetOutputCurrentPPLowValue" />
        <input type="text" id="OutputCurrentPPLowValue" data-bind="value: $root.regData().outputCurrentPPLowValue, enable: $root.regData().setOutputCurrentPPLowValue()" class="form-control" maxlength="30" />

      </div>
    </div>
    <br />

    <div class="row">
      <div class="col-md-1">
      </div>
      <div class="col-md-5 form-inline">
        <label for="SetOutputCurrentPPHighValue" class="control-label">@MSL.Core.Resource.Models.Well.OutputCurrentPPHighValue:</label>

        <input type="checkbox" data-bind="iCheck: $root.regData().setOutputCurrentPPHighValue, enable: $root.regData().setAlarmValues()" class="large-check" id="SetOutputCurrentPPHighValue" title="@MSL.Core.Resource.Models.Well.SetOutputCurrentPPHighValue" />
        <input type="text" id="OutputCurrentPPHighValue" data-bind="value: $root.regData().outputCurrentPPHighValue, enable:$root.regData().setOutputCurrentPPHighValue()" class="form-control" maxlength="30" />

      </div>
    </div>
  </div>

  <!-- /ko -->

Here is the js:

function Registration() {
  var self = this;
  //Alarms
  self.setAlarmValues = ko.observable(false);
  self.setOutputCurrentPPLowValue = ko.observable(false);
  self.setOutputCurrentPPHighValue = ko.observable(false);
  self.outputCurrentPPLowValue = ko.observable("");
  self.outputCurrentPPHighValue = ko.observable("");

}



var registerVM = function() {
  self = this;

  self.validation = ko.observableArray([]);
  self.savingData = ko.observable(false);
  self.regData = ko.observable(new Registration());


  self.changeMade = function() {  }


}

ko.bindingHandlers.iCheck = {
  init: function(el, valueAccessor) {
    var observable = valueAccessor();
    $(el).on("ifChanged", function() {
      observable(this.checked);
    });
  },

  update: function(el, valueAccessor) {
    var val = ko.utils.unwrapObservable(valueAccessor());
    if (val) {
      $(el).iCheck('check');
    } else {
      $(el).iCheck('uncheck');
    }
  }
};

var vm = new registerVM();
ko.applyBindings(vm);