ICheck 不适用于 bootstrap table

Question

我正在使用带有 Admin LTE 模板的复选框的 iCheck(v1.0.2) jquery 插件。 iCheck 除了 bootstrap 表格外工作正常。在 chrome 开发人员工具中检查元素时，我可以在 <td> 中找到由插件创建的 div，但它不可见。

这是html

   <div class="table-responsive">
     <table class="table table-bordered table-striped table-condensed">
       <thead>
         <tr>
           <th>Functionality</th>
           <th>View</th>
           <th>Add</th>
           <th>Edit</th>
           <th>Delete</th>
         </tr>
       </thead>   
       <tbody>
         <tr>
           <td>New Function</td>
           <td><input type="checkbox" class="icheck"></td>
           <td><input type="checkbox" class="icheck"></td>
           <td><input type="checkbox" class="icheck"></td>
           <td><input type="checkbox" class="icheck"></td>
         </tr>
       </tbody>
     </table>
   </div>

Jquery:

   <script>
     $(function () {
       $('.icheck').iCheck();
      });
   </script>

开发者工具：

不考虑控制台错误。这是关于 favicon.ico。我该如何解决这个问题？

Answer 1

给你的 icheckbox class width, height 和 display 属性

示例

width:20px, height:20px, display:inline-block;

你能这样试试吗？

Answer 2

我在 chrome 上遇到了同样的问题，同时在 iCheck 中使用数据表，搜索了 3 小时后，这是我发现的唯一 post 讨论该问题的问题。在研究了以下内容后，我成功了。

你需要给元素ins添加相对位置css。

 $('.iCheck-helper').css('position', 'relative');

如果您在列内使用它，请在您的 rowCallBack 内使用它。

$(nRow).find(':checkbox,:radio').iCheck();
$(nRow).find('.iCheck-helper').css('position', 'relative');

希望它能让人们度过轻松的一天。

ICheck 不适用于 bootstrap table

ICheck not working with bootstrap table

jquery

html

twitter-bootstrap-3

html-table

icheck