禁用过滤时将显示为空的复选框答案

【问题标题】：Disable checkboxes that will appear empty when filtering禁用过滤时将显示为空的复选框
【发布时间】：2017-11-09 04:24:41
【问题描述】：

过滤器链接：
code:http://jsfiddle.net/ar3PY/92/

问题：
我可以过滤，我会得到“空”的结果但是如何禁用在过滤时无论如何都会显示为空的复选框。

!!请注意，每个类别不得过滤自身，只能过滤其他类别。

例如：
如果我选中“VOLVO”和“SILVER”，我会得到“空”。

我在寻找什么：
如果我选中“VOLVO”，那么“SILVER”将被禁用。

显示其工作原理的图片：

【问题讨论】：

标签： checkbox filter filtering

【解决方案1】：

基本上，您只需要访问您的类属性即可使其工作。我叉了你的小提琴，这是修改后的版本：

   $("#filters :checkbox").click(function() { 
        var subj = this;
        resetBoxes();
        $(".filterme").show();

    if(this.checked){
      var all = $(".filterme");
      var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color"));
      var brandtgt = tgts[0].className.split(' ')[1];
      $("#filters :checkbox").each(function(idx){
        var inval = $(this).attr("value");
        var brandclasses = tgts[0].className.split(' ');
        var found = $.inArray(inval, brandclasses);

        if(found<0){
            disable($(this));
        }

        });
    all.not(tgts).hide();
    tgts.show();
    if (tgts.length == 0) {
        $('.empty').show();
    } else {
        $('.empty').hide();
    }
}
});

我在下面的工作小提琴中包含了辅助函数 (resetBoxes, enable, disable)。

http://jsfiddle.net/ppzwmvs9/6/

【讨论】：

看起来不错，但还剩下两件事： 1. 如果未选中任何复选框，我将能够检查整个类别的汽车品牌或汽车样式或颜色。如图所示，我可以点击奥迪、宝马和沃尔沃，然后用颜色和车型进行过滤。 2. 当我选中一些复选框然后取消选中它们时，我注意到一些错误，一些复选框仍然被禁用。谢谢帮忙！
很高兴提供帮助，是的，这是一个粗略的代码，其中包含检查类以帮助您入门的指针 - 特别是在访问形成您的代码严重依赖它的 className 时，最终您可以将其扩展为重置复选框，甚至最初禁用或隐藏其余复选框，使第一步成为品牌选择。
你能修复你留下的错误吗，如果我选中一些复选框然后取消选中它们，一些复选框仍然被禁用并且感觉有问题。 ://
Bugg：如果我开始点击“WHITE”，我只能选择“BMW”，但不能选择“VOLVO”也有白色。
嗯，您的用例已更改。在您的问题中，您总是点击的第一个项目是品牌，例如（沃尔沃），这就是为什么代码是为了首先检查品牌。如果您突然更改用例以首先选择颜色开始，那么它将完全更改代码。这是对早期小提琴jsfiddle.net/ppzwmvs9/7的增强

【解决方案2】：

如何显示每个类别仅具有完全相同属性的已检查过滤器的内容？

另见图片解释：

JSFIDDLE 在这里： http://jsfiddle.net/ar3PY/104

var getFilter = function (category) {
    var filter = $("#filters ." + category + ":checked").map(function () {
        return '[data-filter*="' + this.value + '"]';
    }).get().join(",");
    filter = (filter.length > 0) ? filter : "*";
    return filter;
}

【讨论】：