Javascript 使用jQuery禁用筛选列表中的空类别

我对Javascript/jQuery相当陌生。我有一个UL格式的项目列表（在本例中为课程设置）。每个“过程”都是一个LI元素。使用jQuery按类别对列表进行过滤，jQuery在检查每个列表项的“数据类别”属性是否与所选类别匹配（用户选中的复选框）后控制其可见性

这一切都很好

我还要求用户在选择过滤器/类别组合时不应看到“0结果”。所以，我必须检查每个类别是否返回一个空集。如果会，我希望禁用该类别

首先，我遵循以下示例：

这是我想出的代码：

        // whenever a category is selected, check all categories to see which ones
        // would be empty if selected.
        // To do this, we iterate over all categories, then over all visible items, and check if their data-category contains
        // the category that matches the current category. If 0 items match, disable that category.
        function DisableEmptyCategories() {
            $allCategories = $(".checkboxlist input[type='checkbox']");
            $allCategories.each(function (i, element) {
                var $checkbox = $(element);
                // check if checkbox's value is in any displayed item's data-category tag.
                var val = $checkbox.val();
                if (val !== undefined) {
                    if ($filteredResults.find('[data-category~="' + val + '"]').length == 0) {
                        // if equals 0, disable. 
                        $checkbox.addClass('disabled').attr('disabled', 'disabled');
                    }
                    else {
                        // else, make sure it's enabled.
                        $checkbox.removeClass('disabled').attr('disabled', 'false');
                    }
                }
            });
        }

不幸的是，最终的结果是它每次都会禁用我的所有类别，我不知道为什么。我已检查$filteredResults列表是否与val变量一样正确填充。但是，my.find（）似乎不起作用，总是返回0

这里有一把小提琴说明了这个问题： 在本例中，存在与除“类内”之外的所有类别匹配的项目，因此只有“类内”类别应被禁用，但所有类别均被禁用

---

我做错了什么？

您没有选择正确的

li

的原因是您在

查找中使用的选择器，正如您所怀疑的那样

在您的代码中，您正在执行以下操作：

if ($('#courselist > li').find('[data-category~="' + val + '"]').length == 0) {

这是选择所有
li
s，然后查找其具有匹配数据类别的子项。。。但是数据类别是
li
的一个属性，而不是它的子项

相反，您可以选择
courselist
，然后查找其具有正确数据类别的子项，即

if ($('#courselist').find('[data-category~="' + val + '"]').length == 0) {

这是一个基于小提琴的工作片段：
（我也使用了HereticMonkey建议的
prop
，但这不是您的选择器失败的原因）


$（'.checkboxlist输入[type=“checkbox”]”）。在（'change'，function（）上{
$allCategories=$（“.checkboxlist输入[type='checkbox']”）；
$allCategories.每个（功能（i，元素）{
var$checkbox=$（元素）；
//检查复选框的值是否位于任何显示项的数据类别标记中。
var val=$checkbox.val（）；
如果（val！==未定义）{
控制台日志（val）；
if（$（'#courselist'）.find（'[data category~=“'+val+'“]'））.length==0）{
//如果等于0，则禁用。
$checkbox.addClass（'disabled'）.prop（'disabled'，true）；
}否则{
//否则，请确保它已启用。
$checkbox.removeClass（'disabled'）.prop（'disabled'，false）；
}
}
});
});
正文{
填充：20px；
字体系列：Helvetica；
}
#菜单，
#内容{
浮动：左；
}
/*禁用复选框*/
.checkboxlist输入[type='checkbox']。已禁用+标签{
颜色：红色；
}


传送



在线 的


课堂上


费用



免费的

支付


课程表

免费在线课程名称-CRSE-1000
在线付费课程名称-CRSE-1000
在线付费课程名称-CRSE-1000
免费在线课程名称-CRSE-1000
在线付费课程名称-CRSE-1000
免费在线课程名称-CRSE-1000

使用
prop（'disabled'，true）
和
prop（'disabled'，false）
，而不是
attr
，使用布尔属性，如“disabled”
attr（'disabled'，'false'）
导致复选框保持禁用状态，因为复选框的禁用是基于“disabled”属性的存在或不存在，而不是它的值。噢，谢谢@HereticMonkey，我不知道。我已经在本地更新了它。使用
prop（'disabled'，false）
，而不是
prop（'disabled'，'false'）
，因为非空字符串是真实的。。。也许应该用
道具（'disabled'，true）
来说明清楚。@Hereticsmonkey谢谢，我会做出改变，我在抄写的时候打错了，因为你的评论发现了
true
，而不是
。
（可能应该重新检查：）@flufykitten好吧，这就解释了。非常感谢。这对我来说确实很困惑。但是，由于在我的实际应用程序中，我传递了一个变量，该变量只包含“可见”的项，即过滤列表项（LI元素），那么我是否可以使用一些东西来代替“find（）”在元素本身中搜索呢？我想如果我要传递整个UL列表，它会找到所有类别，包括未选中/可见的元素上的类别。@user0474975我肯定有，但我们需要先看看该变量包含什么，然后才能帮助解决：）这听起来像是另一个问题，因此，它可以改变问题和答案，而不是堆栈溢出是如何工作的。这里的问题也是为了帮助其他用户，所以指导原则是让每个人都专注于一个问题。你能给我一个简短的例子说明变量包含什么吗？如果它仍然在这个问题的上下文中，我将编辑我的答案；如果不是，那么作为一个单独的问题提问是完全可以接受的@FluffyKitten它是LI元素的（数组？），是原始UL列表项的子集。我在这里找到了答案：（第二个答案）-使用filter（）而不是find（）。我用它作为一个直接的重新定义