Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iCheck checkboxes not displaying

I can't get the iCheck iCheckbox plugin to display in any browser.

Here is a jSFiddle. iCheck depends on jQuery 1.7+.

http://jsfiddle.net/jmj3M/2/

I have it initialized without any options:

$(".ex-f").iCheck();

As you can see if you inspect the DOM, the input element is being wrapped by the iCheckbox div. Both the <input> and <ins> elements have their opacity set to 0, however.

Changing their opacity via jQuery, you get this: http://jsfiddle.net/buRq7/

Unfortunately, it still does not work. Does anyone have any advice or experience on getting this to work?

I'm using rails 4 and the asset pipeline.

EDIT: I just realized I selected no-library (pure JS) as a framework option in jsFiddle, and it seems to work even without changing the opacity (see: http://jsfiddle.net/buRq7/5/). However, the documentation explicitly says that it depends on jQuery (or Zepto). Switching the framework option to jQuery 1.10.1 leads to the iCheckbox no longer functioning again ... not sure why this is.

like image 305
kwyoung11 Avatar asked Aug 27 '13 22:08

kwyoung11


1 Answers

Choose a skin and import the css for selected one:

<link href="http://fronteed.com/iCheck/skins/all.css" rel="stylesheet"> 
<script src="http://fronteed.com/iCheck/icheck.js"></script>

and to load the iCheck you can use, for example:

$(".ex-f").iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal'
});

Check it at: http://jsfiddle.net/a4p6kjb9/

like image 86
Ricardo Silva Avatar answered Oct 19 '22 00:10

Ricardo Silva