0

我是 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只是为了证实它运行良好。这个想法是制作一个更优雅的代码，而不是使用 #dressing-1 #dressing-2.. 等等......这就是为什么我试图将它应用于容器.contenido-dressing。

这是网站：lunchtime.cl/menu

4

2 回答 2

1

在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并找到他的父母。

这里有一个小提琴：http: //jsfiddle.net/SyZ9Z/

于 2013-05-04T15:45:55.790 回答
0

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

使用类似的东西

$('[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));
        });
    });
});
于 2013-05-04T15:42:04.843 回答