Question

我是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

Answer 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/

Answer 2

“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));
        });
    });
});

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

2 个答案: