mardi 12 janvier 2021

Checkbox doesn't enable fields Knockout

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());
}



Aucun commentaire:

Enregistrer un commentaire