JQuery-高级复选框处理

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

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

所以。。。。 我使用以下代码禁用四个字段集上的重复复选框：

$(window).load(function(){ $('input[type=checkbox]').change(function(){ name = $(this).attr('name'); id = $(this).attr('id'); checked = $(this).attr('checked'); $('input[type=checkbox][name='+name+']:not(#'+id+')') .attr('disabled',checked) .each(function(){ lid = $(this).attr('id'); if (checked) { $('label[for='+lid+']').addClass('disabled'); } else { $('label[for='+lid+']').removeClass('disabled'); } }); }); }); 这是完美的工作，但是，我还需要防止用户检查每个字段集只有一个复选框。。。或者，当他们试图勾选字段集中的多个复选框时，向他们发出警告。有没有办法编辑上面的脚本来实现这一点

---

谢谢

您应该获得选中复选框的数量，并从中进行验证

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

});

-尝试取消选择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);
    };

});

-我认为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')
    }

});  

---

您应该获得复选框的数量，并从中进行验证

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

});

-尝试取消选择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);
    };

});

-我认为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')
    }

});  

---

如果您有一个只能选择一个元素的多选择器，为什么不在字段集中使用单选按钮而不是复选框？如果您有一个只能选择一个元素的多选择器，为什么不在字段集中使用单选按钮而不是复选框？谢谢。。。我想我误解了我的要求。我希望防止用户在每个字段集中选择多个复选框。默认情况下取消选中所有复选框。没问题，请查看最后一个演示。它不工作。。。我认为这可能与跨字段集复制的复选框名称冲突。我把我的页面代码放在这里：它成功了！谢谢Jyoseph！我们还可以防止第二个复选框在显示警报后保留其选中值吗？类似于：checkbox.checked=false？谢谢我想我误解了我的要求。我希望防止用户在每个字段集中选择多个复选框。默认情况下取消选中所有复选框。没问题，请查看最后一个演示。它不工作。。。我认为这可能与跨字段集复制的复选框名称冲突。我把我的页面代码放在这里：它成功了！谢谢Jyoseph！我们还可以防止第二个复选框在显示警报后保留其选中值吗？类似于：checkbox.checked=false？