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?
Here is a picture of how it looks like at the moment:
I am trying to make the Low value and High value checkboxes to look like they are enabled (blue in this case).
<!-- ko if: $root.regData -->
<div class="row">
<div class="col-md-2">
<label for="SetAlarmValues" class="control-label">Set Alarm Values:</label>
<input type="checkbox" data-bind="iCheck: $root.regData().setAlarmValues" class="large-check" id="SetAlarmValuesCheck"/>
</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">OutputCurrentPPLowValue: </label>
<input type="checkbox" data-bind="iCheck: $root.regData().setOutputCurrentPPLowValue, enable: $root.regData().setAlarmValues()" class="large-check" id="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">OutputCurrentPPHighValue:</label>
<input type="checkbox" data-bind="iCheck: $root.regData().setOutputCurrentPPHighValue, enable: $root.regData().setAlarmValues()" class="large-check" id="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());
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);
have a look at the following; I have added the "checked" bindingHandler to your checkboxes and everything looks like it's working. I'm assuming you'll need that icheck bindingHandler to work with that custom js library.