Indeterminate checkbox or radio is not supported

[dadoadk]

Nowhere in documentation shows an example how indeterminate checkbox is actually working. Besides true and false, checkbox can change indeterminate to true while the target.checked is true. Seems like ifIndeterminate callback doesn't trigger when indeterminate="true", although indeterminate class shows in html element. Another thing, css class for indeterminate does not exist in any css files, nor the .png images have indeterminate icon available. I wouldn't say that iCheck fully supports indeterminate checkboxes and radios. Can anybody chime in.

I'm using iCheck on AngularJS.

[rutger1140]

@dadoadk Did you find any workaround for this? I'm looking to style some indeterminate checkboxes as well.

[rutger1140]

Sorry, scratch that. I had another javascript fooling around.

[defkev]

+1 for indeterminate support for checkboxes

I suppose that #94 still applies, even in the latest version of iCheck Now i need to fall back to a legacy checkbox...

[LuisUrrutia]

My team needs this feature too.

[oytuneyucel]

+1 for indeterminism

[ugumu]

I need indeterminate state too!

[vcarreno96]

• 1 indeterminate

[envitraux]

Okay. Looking though the code it seems one has to modify the skin, which I was able to successfully do for just one iteration of one skin. I will fork the project and then show how to do it. See https://github.com/envitraux/icheck

[shuaqiu]

Need it too. And I found that the indeterminate class has been added to div when I run $('input').iCheck('indeterminate'), so is it just need to update the background image ?

[Zyten]

Here's a gist for implementing indeterminate state for the minimal-grey theme using css. It's crude but you can easily tweak it to fit your needs while awaiting official implementation using background image. https://gist.github.com/Zyten/4435a5dad1bd3688a902fd9ef25d02be

[nfantone]

If anyone is still looking for this after all this time, here's a version that worked for me with using icheck-bootstrap 3.0.1.

// Draw indeterminate straigh line on checkbox
[class*='icheck-'] > input:first-child:indeterminate + label::after,
[class*='icheck-'] > input:first-child:indeterminate + input[type='hidden'] + label::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  border: solid 2px #fff;
  border-left: none;
  border-top: none;
  transform: translate(6.3px, 10.2px);
}

// Set color classes based on variant ("primary" given as an example)
.icheck-primary > input:first-child:indeterminate + label::before,
.icheck-primary > input:first-child:indeterminate + input[type='hidden'] + label::before {
  background-color: #fefefe;
  border-color: #fefefe;
}