CODEWITHSUNDEEP
javascriptjqueryhtmlcssicheck
speedy
speedy

Reputation: 375

iCheck checkboxes as radio buttons

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');
});

Upvotes: 3

Views: 1685

Answers (1)

Kendall Starr
Kendall Starr

Reputation: 39

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.

Upvotes: 1

Related Questions