【问题标题】:iCheck not working with knockoutiCheck 不适用于淘汰赛
【发布时间】:2018-03-25 23:54:58
【问题描述】:

我正在使用iCheck-bootstrap v1.07 的纯 css 插件和knockout v3.4.2。使用不敲除的 iCheck 时,复选框呈现完美。但是,当我添加淘汰赛和引导程序时,两者似乎不能一起工作。我在下面粘贴了我的代码的 sn-p。请帮忙解决我需要纠正的问题?

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>

【问题讨论】:

    标签: javascript css twitter-bootstrap knockout.js icheck


    【解决方案1】:

    似乎工作正常,也许你的 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>

    【讨论】:

    • 它部分工作如 CSS 所示。但是,我注意到我无法使用 iCheck 点击该框。
    猜你喜欢
    • 2020-06-22
    • 2014-08-05
    • 2013-03-30
    • 2013-01-13
    • 2012-08-25
    • 1970-01-01
    • 1970-01-01
    • 2014-02-13
    • 2015-09-18
    相关资源
    最近更新 更多