Javascript 独立限制不同类中的各种复选框

Javascript 独立限制不同类中的各种复选框,javascript,jquery,checkbox,each,Javascript,Jquery,Checkbox,Each,我是JS和jQuery的新手,我面临着一个用我的知识无法解决的问题。。。 我有一个网站,让用户选择不同类型的沙拉,有不同的选择,但我需要限制一些项目的选择,我不知道怎么做。 复选框驻留在一个类中,但我有太多的复选框,我只想限制特定类中的复选框 $(document).ready(function(){ $('#dressing-1 input[type=checkbox]').click(function(){ if($('#dressin

我是JS和jQuery的新手,我面临着一个用我的知识无法解决的问题。。。 我有一个网站,让用户选择不同类型的沙拉,有不同的选择,但我需要限制一些项目的选择,我不知道怎么做。 复选框驻留在一个类中,但我有太多的复选框,我只想限制特定类中的复选框

$(document).ready(function(){
            $('#dressing-1 input[type=checkbox]').click(function(){
                if($('#dressing-1 input[type=checkbox]:checked').length>=2){
                    alert($('#dressing-1 input[type=checkbox]:checked').length);
                    $('#dressing-1 input[type=checkbox]:not(:checked)').prop("disabled", true);
                } else {
                    $('#dressing-1 input[type=checkbox]').prop("disabled", false);
                }
            });
    });
这是我现在拥有的代码,它正在工作,但只适用于第一项。我想将此代码提供给类
.contenido dressign
的所有项目,现在我使用id
#dressing-1
只是为了证实它工作良好。 我们的想法是制作一个更优雅的代码,而不是使用#drung-1#drung-2。。等这就是为什么我试图将此应用于容器
.contenido敷料

这是站点:

“这”是一个对象而不是字符串

使用类似

$('[type=checkbox]', this)
此外,如果未单击复选框,则标签为

我的建议是:

$(document).ready(function(){
    $('.contenido-dressing').each(function(){
        var $c;
        $c = $('[type=checkbox]', this);

        $c.change(function(){
            if($c.filter(":checked").size() >= 2){
                $c.filter(":not(:checked)").attr('disabled', true);
            } else {
                $c.attr('disabled', false);
            }
        });
    });
});
更新: 甚至更短:

$(document).ready(function(){
    $('.contenido-dressing').each(function(){
        var $c;
        $c = $('[type=checkbox]', this);

        $c.change(function(){
            $c.filter(":not(:checked)")
              .attr('disabled', ($c.filter(":checked").size() >= 2));
        });
    });
});

函数中的
this
单击引用复选框itsefl,因此它不会调用所有复选框。这样做:

$(document).ready(function(){
    $('.contenido-dressing').find(':checkbox').change(function(){
        var parent = $(this).parent()
        if(parent.find(':checked').length >= 2){
            parent.find(':checkbox:not(:checked)').attr('disabled', true);
        } else {
            parent.find(':checkbox').attr('disabled', false );
        }
    });
});
不需要每个函数,您可以绑定所有进入div
.contenigo-dressing
的复选框并找到其父项


这里有一把小提琴:

谢谢,但那没用。我更新了代码。它现在正在工作,但只适用于第一个容器。我想对所有的.孔蒂多服装课都这么做,但我不能。哦,这是因为每次$c都被覆盖了。行“var$c;”解决了这个问题。抱歉,但它不起作用。如果你感兴趣的话,我更新了代码。我仍然不能实现我想要的,至少不能以“优雅的编码”的方式。好吧,我检查了我的代码,只是忘记在某个地方放一个
false
。我用小提琴更新了我的答案,现在它开始工作了。我还更改了
单击
绑定
更改