Using categories with Isotope

Question

This one maybe a bit tricky, but currently I have a page that is using categories and isotope.js filtering to arrange channel entries.

The filtering using the check-boxes works well. However one thing I'd like to do to extend it further is this;

Using the above image for reference, lets say Entry #1 has categories of Commercial and Construction set. If I click on the Commercial checkbox, then Entry #1 appear in the filter. Likewise if I check Construction, the entry will show, regardless of whether Commercial is checked or not.

What I'd like to happen is if I check the Commercial check-box, then every box except Construction would disappear because hypothetically, only Entry #1 has been assigned to a category in that list (ie. Construction).

Likewise if I clicked on Construction, is it possible to grey out the top list of categories with the exception of Commercial because only Entry#1 'theoretically' has a category assigned in that list.

I apologize in advance as this is quite a difficult problem to word into a question. I hope someone out there is able to get a grip of what I mean and maybe help me out a bit.

*Obviously I would like to post a JSFiddle to better illustrate the request, but because its currently reliant on EE's channel entries and categories, I'm unable to do so.

Markup

<section>
<div class="container">    
    <div class="row">
        <div class="col-xs-12 col-sm-3">
            <div id="filters">
                <h3>Market</h3><br/>    
                {exp:channel:categories category_group="7" style="linear" show_empty="no"}
                    <input type="checkbox" name="{category_name}" value=".{category_name}" id="{category_name}"><label for="{category_name}">&nbsp;{display_name_sectors}</label><br>
                {/exp:channel:categories}<hr/>
                <h3>Capabilities</h3><br/>    
                {exp:channel:categories category_group="9" style="linear"}
                    <input type="checkbox" name="{category_name}" value=".{category_name}" id="{category_name}"><label for="{category_name}">&nbsp;{display_name_capabilities}</label><br>
                {/exp:channel:categories}<hr/>
                <h3>Region</h3><br/>
                {exp:channel:categories category_group="10" style="linear"}
                    <input type="checkbox" name="{category_name}" value=".{category_name}" id="{category_name}"><label for="{category_name}">&nbsp;&nbsp;{display_name_regions}</label><br>
                {/exp:channel:categories}
            </div>
        </div>
        <div class="col-xs-12 col-sm-9">
            <h3>Filtered Projects</h3><br/>
            <div id="blocks-container">
                {exp:channel:entries dynamic="off" channel="projects" status="not closed"}

                    <div class="iso-block {categories}{category_name} {/categories}">

                        <p>{title}<br/><em>{categories backspace="2"}{category_name}, {/categories}</em></p></div>
                {/exp:channel:entries}
            </div> <!--#blocks-container-->
        </div>
    </div>
</div><!--container-->
</section>


<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<script>
$(function(){

  var $container = $('#blocks-container'),
  $checkboxes = $('#filters input');

  $container.isotope({
  itemSelector: '.iso-block',
  masonry: {
  columnWidth: 100
  }
  });

 $checkboxes.change(function(){
 var filters = [];
// get checked checkboxes values
 $checkboxes.filter(':checked').each(function(){
  filters.push( this.value );
 });

filters = filters.join(', ');
$container.isotope({ filter: filters });
});

});
</script>

Answer 1

Should be pretty straight-forward, though it's really more of a JS question than EE...

In the Isotope callback (ie, after it has finished filtering), you'll need to create a function that fetches all the class names of all visible (filtered) items (jQuery's :visible selector should work there), then pass those class names to a jQuery selection to toggle a class on the associated checkboxes to grey them out - maybe using something like $($checkboxes).not($classes).toggleClass('nope').

You'll just need to format the class list to make a string like: [name=...],[name=...],[name=...].