2017-10-13 73 views
0

我沿着它使用了一個純粹的css插件iCheck-bootstrap v1.07與knockout v3.4.2。在不使用淘汰賽的情況下使用iCheck時,複選框完美呈現。但是,當我添加淘汰賽和引導,這兩個似乎並不一起工作。我在下面粘貼了一段代碼。請幫助我需要糾正什麼?iCheck不與敲除工作

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>

回答

0

似乎是工作的罰款,也許你的I檢查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>

+0

這部分工作的CSS顯示。但是,我注意到我無法用iCheck點擊框。 – usr4896260