javascript - iCheck 和淘汰赛 - 启用绑定不显示相关复选框已启用

Question

我有一个工作正常的 setAlarmValues 复选框。但是，当检查时，setOutputcurrentpplowvalue＆setOutputcurrentpphighValue checkboxed不会显示启用。如果选中了 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>&nbsp;

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

标签： javascriptcheckboxknockout.jsicheck

Answer 1

看看以下内容；我已将“已检查”的 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>&nbsp;

        <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 -->