jquery - jquery隐藏在过滤器中没有结果的复选框

Question

我将以下 jquery 用于具有多个类别的过滤器。

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

$("#filters :checkbox").click(function() {
    var all = $(".filterme");
    var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color"));
    all.not(tgts).hide();
    tgts.show();
});

可见：http: //jsfiddle.net/ar3PY/2/

除了我希望能够隐藏不相关的复选框之外，一切都很好。这意味着如果我选中“BMW”，那么“Audi”复选框应该被隐藏（不可点击），以及该结果中不存在的其他复选框，如“limousine”和“SUV”。

Answer 1

您需要将以下行添加到#filters :checkbox选择器上的单击处理程序中：

$("#filters :checkbox").click(function() {
    var all = $(".filterme");
    var tgts = all.filter(getFilter("brand")).filter(getFilter("class")).filter(getFilter("color"));
    all.not(tgts).hide();
    tgts.show();

    var blockSiblings = $(this).is(':checked'); // determine whether or not to disable siblings
    $(this).siblings(':checkbox').prop('disabled', blockSiblings); // set the property
});

示例小提琴