knockout.js - Checkbox doesn't enable fields Knockout

Question

I'm trying to set enabled true for "SetOutputCurrentPPLowValue" & "SetOutputCurrentPPHighValue" when "SetAlarmValues" is checked. I have the following code, for this issue:

The fields are disabled when the page is loaded but when the "SetAlarmValues" is checked, they stay disabled. I'm not sure why. Please help!

  <!-- 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="checked: $root.regData().setAlarmValues" class="large-check registration" 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="checked: $root.regData().setOutputCurrentPPLowValue, enable:  $root.regData().setAlarmValues()" class="large-check registration" 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="checked: $root.regData().setOutputCurrentPPHighValue, enable: $root.regData().setAlarmValues()" class="large-check registration" 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 -->

And this is the script:

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 (countryListJSON, companyListJSON, wellStatusListJSON, territoryListJSON) {
    self = this;

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

Answer 1

In your code i see this statement- enable: $root.regData().setAlarmValues(), and the setAlarmValues value is been set to false. It will only enabled once you set the value of the field setAlarmValues to true. But as you mentioned once the checkbox is checked please make sure to check if the value is still false or is it changed to True.