iCheck复选框作为单选按钮使用

Question

我正在使用 iCheck 来处理单选按钮和复选框。 如何使用 iCheck 让复选框像单选按钮一样工作？

以下是我的代码：

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

- speedy

---

如果您需要它们的行为像单选按钮，为什么不直接使用单选按钮呢？ - Pete

你可以使用CSS使复选框和单选按钮看起来相同 - 查看此帖子 - Pete

我的代码可以运行，但是复选框可以被取消选择。 - speedy

Answer 1

这对我有效：

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

如果需要解释：

禁用复选框可以干净地防止用户取消选择，但会使其变灰（根据iCheck的'.checked.disabled'类）。在父div上执行.removeClass('disabled')可以恢复颜色，而无需破坏背景位置（iCheck使用一个背景图像来表示所有复选框和单选按钮状态），也无需稍后撤消它。另一个副作用是当您鼠标移出时，“hover”类不会消失，可能是因为现在已被禁用，因此需要额外的mouseleave监听器。

在最新版本的Chrome，Firefox和IE中测试过。
好吧，我使用'$'进行了测试，但我没有使用多个JS库。为您转换为$j。

- Kendall Starr