作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 iCheck-bootstrap 的纯 css 插件v1.07 连同 knockout v3.4.2。当使用没有 knockout 的 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>
最佳答案
似乎工作正常,也许你的 icheck 的 cdn 工作不正常。我正在使用 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>
关于javascript - iCheck 不适用于 knockout ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46736802/
我是一名优秀的程序员,十分优秀!