问题描述
我有一个可以正常工作的 setAlarmValues 复选框。但是当检查时,SetoutputCurrentPplowValue&setoctpurrentPphighValue复选框不显示它们已启用。如果 setAlarmValues 被选中,它们可以被点击,但它们是灰色的,并且光标在悬停时不会改变。检查元素时,我可以看到它被禁用或启用,但类保持不变:icheckBox_square-blue 禁用。我猜这是它无法正常工作的原因,但我该如何动态更改它?
这是目前的样子:
我正在尝试使低值和高值复选框看起来像是已启用(在本例中为蓝色)。
<!-- 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 -->
这里是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);
解决方法
看看下面的内容;我已将“已检查” bindingHandler 添加到您的复选框中,一切看起来都在正常工作。我假设您需要 icheck bindingHandler 来使用该自定义 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);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/icheck.min.js"></script>
<!-- ko with: $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,iCheck: $root.regData().setAlarmValues" 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>
<input type="checkbox" data-bind="checked: $root.regData().setOutputCurrentPPLowValue,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="checked: $root.regData().setOutputCurrentPPHighValue,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 -->