JQuery - 高级复选框处理

Posted 2023-05-09

【中文标题】JQuery - 高级复选框处理

【英文标题】：JQuery - Advanced Check box Handling

【发布时间】：2011-05-27 07:36:02

【问题描述】：

我有四个复选框字段集。每个字段集是一个时间段（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'); ); ); );

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

谢谢！

【问题讨论】：

如果您有一个只能选择一个元素的多选器，为什么不在字段集中使用单选按钮而不是复选框？

【参考方案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')
    

);  

【讨论】：

谢谢...我想我误解了我的要求。我希望防止用户在每个字段集中选择多个复选框。默认情况下，所有复选框都被取消选中。

没问题，看最后一个demo。

它不起作用...我认为这可能与跨字段集重复的复选框名称发生冲突。我已经把我的页面代码放在这里了：jsfiddle.net/jweisberg/a8kaY

成功了！谢谢约瑟夫！我们还可以防止第二个复选框在显示警报后保留它的选中值吗？

类似：checkbox.checked = false; ?