JQuery - 高级复选框处理

Question

我有四个复选框字段集。每个字段集是一个时间段（12-1、1-2、2-3、3-4），在每个字段集中，我都有研讨会（研讨会 1、研讨会 2、研讨会 3 ......等）

每个字段集或时间段可以选择仅参加一个研讨会。 不能跨多个时间段选择同一个研讨会。 一些时间段有独特的研讨会，不会出现在任何其他时间段中 所有时间段都可以选择在该时间段内不参加研讨会。

所以.... 我正在使用以下代码禁用四个字段集中的重复复选框：

$(窗口).load(函数(){ $('input[type=checkbox]').change(function(){ name = $(this).attr('name'); id = $(this).attr('id'); 已检查 = $(this).attr('checked'); $('input[type=checkbox][name='+name+']:not(#'+id+')') .attr('禁用'，选中) .每个（函数（）{ 盖子 = $(this).attr('id'); 如果（选中）{ $('label[for='+lid+']').addClass('disabled'); } 别的 { $('label[for='+lid+']').removeClass('disabled'); } }); }); });

这是完美的工作，但是，我还需要防止用户只检查每个字段集的一个复选框......或者当他们尝试检查字段集中的多个复选框时提醒他们。有没有办法编辑上面的脚本来完成这个？

谢谢！

Answer 1

您应该获取选中复选框的数量并从那里进行验证

$('input[type=checkbox]').click(function(){

    // get the checked elements in this fieldset    
    var numChkd = $(this).siblings(':checked').size();

    // do whatever kind of validation you need
    if(!numChkd && !this.checked){
        alert('Please select at least one');
        // keep it checked?
        $(this).attr('checked',true);
    };

});

Demo here

---

Another Demo -- 当您尝试取消选择超过 2 个时显示。不过，实际上只需更改验证以满足您的需要；

$('input[type=checkbox]').click(function(){

    var numChkd = $(this).siblings(':checked').size();

    if(numChkd <= 1 && !this.checked){
        alert('Please select at least two');
        $(this).attr('checked',true);
    };

});

---

Another demo 回复评论。只需更改 if() 语句即可。

if(numChkd >= 1){
    alert('Please select only one per fieldset');
    $(this).attr('checked',false);
};

---

Another Demo - 我相信 html 存在一些问题。即附加到每个输入的onclick。它无法在您的 html 上运行的原因是因为它依赖于遍历（例如查找父字段集）。

$('input[type=checkbox]').click(function(){

    // get the fieldset class
    var fieldset = $(this).parents('fieldset').attr('class');

    // set the number of checked
    var numChecked = $('.'+fieldset+' input:checked').size();

    // if more than 1
    if(numChecked > 1){
        alert('Please select only 1')
    }

});