CODEWITHSUNDEEP
checkboxfilterfiltering
Doodl
Doodl

Reputation: 247

Disable checkboxes that will appear empty when filtering

Link to the filter:
code: http://jsfiddle.net/ar3PY/92/

Question:
I can filter and I will get result "empty" But how to disable checkboxes that will anyway appear empty when filtering.

!!Notice that each category shall no filter with itself, only with other categories.

For example:
If I check "VOLVO" and "SILVER" I get "empty".

What I looking for:
If I check "VOLVO", then "SILVER" will be disabled.

Image that show how it should work:
enter image description here

Upvotes: 1

Views: 570

Answers (2)

Doodl
Doodl

Reputation: 247

How to show content of checked filter that only has exacly same attribute for each category?

see also image for explanation:

How to show content of checked filter that only has exacly same attribute for each category? see also image:

.

JSFIDDLE HERE: 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;
}

Upvotes: 0

Qiqo
Qiqo

Reputation: 64

Basically you just needed to access your class attributes to make it work. I forked your fiddle, here's the modified version:

   $("#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();
    }
}
});

I've included helper functions (resetBoxes, enable, disable) found in the working fiddle below.

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

Upvotes: 1

Related Questions