3

I'm using iCheck for radio buttons and checkboxes.
How can I use checkboxes to act like radio buttons with iCheck?

This is what I have:

$j(function(){
    $j('input:checkbox.tip-facturare').on('ifChecked', function(event){
    $j('input:checkbox.tip-facturare').not($j(this)).iCheck('uncheck');
    $j(this).iCheck('check');
});
Jørn Schou-Rode
  • 35,883
  • 13
  • 81
  • 120
speedy
  • 365
  • 1
  • 14
  • 4
    Why not just use radio buttons if you need them to behave like radio buttons? – Pete Jul 30 '14 at 09:05
  • You can use css to make checkboxes and radio buttons look the same - [check this post](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) – Pete Jul 30 '14 at 09:49
  • My code is working, but the checkbox can be unchecked – speedy Jul 30 '14 at 09:55

1 Answers1

1

This works for me:

$j('input:checkbox.tip-facturare').on('ifChecked', function(e){
    $j('input:checkbox.tip-facturare').not($j(this)).iCheck('uncheck').iCheck('enable');
    $j(this).iCheck('disable').parents('div').removeClass('disabled');
});

$j(document).on('mouseleave','.hover.checked', function() {
    $j(this).removeClass('hover');
});

Explanation if needed:

Disabling the checkbox cleanly prevents user from unchecking, but makes it gray (per iCheck's '.checked.disabled' class). Doing .removeClass('disabled') on the parent div restores the color without having to hack the background position (iCheck uses one background image for all checkbox and radio states) and having to undo it later. Another side-effect is the 'hover' class won't go away when you mouseout, presumably because it's now disabled, hence the extra mouseleave listener.

Tested in the latest versions of Chrome, Firefox, and IE.
Well, I tested using '$', but I'm not using multiple JS libraries. Converted to $j for you.

Kendall Starr
  • 39
  • 4