iCheck不适用于击倒

Question

我在knockout v3.4.2中使用了iCheck-bootstrap v1.07的纯css插件。使用不带挖空的iCheck时，复选框可完美呈现。然而，当我添加knockout和bootstrap时，这两者似乎不能一起工作。我已经粘贴了下面的代码片段。请帮我解决我需要纠正的问题？

​

function model() {
  var self = this;
  selectOne = ko.observable(true);
  selectTwo = ko.observable(false);

}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://raw.githubusercontent.com/bantikyan/icheck-bootstrap/master/icheck-bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>




<div class="checkbox icheck-default">
  <input type="checkbox" data-bind="checked: selectOne" />
  <label>Select One with iCheck</label>
</div>
<div class="checkbox icheck-default">
  <input type="checkbox" data-bind="checked: selectTwo" />
  <label>Select One with iCheck</label>
</div>
<hr />
<div>
  <input type="checkbox" data-bind="checked: selectOne" />
  <label>Select One w/o iCheck</label>
</div>
<div>
  <input type="checkbox" data-bind="checked: selectTwo" />
    <label>Select Two w/o iCheck</label>
</div>

​

Answer 1

看起来工作正常，也许你的cdn for icheck不能正常工作。我正在使用https://cdn.rawgit.com/bantikyan/icheck-bootstrap/master/icheck-bootstrap.min.css

​

function model() {
  var self = this;
  selectOne = ko.observable(true);
  selectTwo = ko.observable(false);

}

var mymodel = new model();

$(document).ready(function() {
  ko.applyBindings(mymodel);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://cdn.rawgit.com/bantikyan/icheck-bootstrap/master/icheck-bootstrap.min.css" rel="stylesheet" />


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<div class="checkbox icheck-default">
  <input type="checkbox" data-bind="checked: selectOne" />
  <label>Select One with iCheck</label>
</div>
<div class="checkbox icheck-default">
  <input type="checkbox" data-bind="checked: selectTwo" />
  <label>Select One with iCheck</label>
</div>
<hr />
<div>
  <input type="checkbox" data-bind="checked: selectOne" />
  <label>Select One w/o iCheck</label>
</div>
<div>
  <input type="checkbox" data-bind="checked: selectTwo" />
  <label>Select Two w/o iCheck</label>
</div>

​