Limiting checked inputs to two in if statement, using Underscore

Where I'm stuck

I'm looking to make it so that when a user selects an option from the "Ethnicity" category in the sidebar, they can choose a maximum of two before the other options are unable to be selected.

Right now, you can select more than two options, so I'm wondering how to change my if statement to reflect that. Previously, I tried the following block of code and it is on the right track, however, it doesn't help keep track of the number of politicians of the chosen ethnicity, which get presented in index.html

Previously

$("input[name='ethnicity']").on("change", function() {
        var $checkedbox = $("input[name='ethnicity']:checked");

        if($checkedbox.length >= 2)
        {
            var $uncheckedbox = $("input[name='ethnicity']:not(:checked)");
            $.each($uncheckedbox, function() {
                $(this).attr("disabled", "disabled");
            });
        }
        else
        {
            $("input[name='ethnicity']").removeAttr("disabled");
        }
    });

JSFiddle

Here's a JSFiddle that I've been working off of: http://ift.tt/19ZWija

scripts.js

var $total = $('#total');
var $MLA_List = $('#MLA_List');

// MLAs
var MLAs = [
{
    "Name": "Nancy Allan",
    "Age": 62,
    "Constuency": "St. Vital",
    "Party": "NDP",
    "Gender": "Female",
    "Ethnicity": "White"
},
{ // Missing Data
    "Name": "James Allum",
    "Age": null,
    "Constuency": "Fort Garry-Riverview",
    "Party": "NDP",
    "Gender": "Male",
    "Ethnicity": "White"
},

var filteredMLAs = MLAs.slice(0); // copy MLAs
var total = filteredMLAs.length;

var refreshList = function () {
    var list = filteredMLAs;
    setTotal(list.length);

    $MLA_List.empty();
    $.each(list, function (index, value) {
        $MLA_List.append($('<li/>').text(list[index].Name));
    });
};
var setTotal = function (value) {
    $total.text(value);
};

// filter methods
var gender = function (array, gender) {
    //console.log('gender filter called!', gender);
    return _.where(array, {
        "Gender": gender
    });
};

var ethnicity = function (array, ethnic) {
    //console.log('ethnic filter called!', array, ethnic);
    return _.where(array, {
        "Ethnicity": ethnic
    });
};

var age = function(array, ageRange) {
    //under 35, 36-64, 65+
    return _.filter(array, function(MLA) {
        //console.log(MLA.Age);
        switch(ageRange) {
            case 35:
                return ( MLA.Age <= 35 );
            case 36:
                return ( MLA.Age >= 35 && MLA.Age <= 64);
            case 65:
                return ( MLA.Age >= 65 );
        };
        return false;
    });
};

var activeFilters = [];
var setFilter = function (method, param) {
    var newFilter = {
        method: method,
        param: param
    };

    var matchedFilter = _.find(activeFilters, newFilter),
        index = activeFilters.indexOf(matchedFilter);
    if ( index == -1 ) {
        activeFilters.push(newFilter);
    }

    applyFilter();
};

var removeFilter = function(method, param) {
    var filter = {
        method: method,
        param: param
    };

    var index = activeFilters.indexOf(_.find(activeFilters, filter));
    if (index > -1) {
        activeFilters.splice(index, 1);
    }
    applyFilter(); // re-apply filter to update list
};

var applyFilter = function () {
    var filtered = MLAs.slice(0);
    $.each(activeFilters, function () {
        filtered = this.method(filtered, this.param);
    });
    filteredMLAs = filtered ? filtered: [];
    refreshList();
};

$('#male, #female').click(function () {
    //console.log(this.id);
    removeFilter(gender, this.id=='male'? 'female': 'male'); // remove not active filter
    setFilter(gender, this.id);
});

$('.Age').click(function() {
    removeFilter(age, 35); // improvement of remove filter required, e.g. remove all age filters
    removeFilter(age, 36);
    removeFilter(age, 65);
    setFilter(age, parseInt(this.value));
});

$('#white, #black', '#aboriginal', '#metis', '#asian').click(function () {
    //console.log(this.checked);
    if ( this.checked )
        setFilter(ethnicity, this.id); //'White');
    else
        removeFilter(ethnicity, this.id); //'White');
});

index.html

<section class="interactive clearfix">
            <section class="selection" id="selection">
                <div class="gender">
                    <p class="category">Gender</p>
                    <div class="options">
                        <input type="radio" id="male" class="button rect G1" name="gender"></input>
                        <label for="male">Male</label>
                        <input type="radio" id="female" class="button rect G1" name="gender"></input>
                        <label for="female">Female</label>
                    </div><!-- /.options -->
                </div><!-- /.gender -->

                <div class="age">
                    <p class="category">Age</p>
                    <div class="options">
                        <input type="radio" id="a35" class="button rect A1" name="age"></input>
                        <label for="a35">Under 35</label>
                        <input type="radio" id="a36" class="button rect A2" name="age"></input>
                        <label for="a36">36-64</label>
                        <input type="radio" id="a37" class="button rect A3" name="age"></input>
                        <label for="a37">65+</label>
                    </div><!-- /.options -->
                </div><!-- /.age -->

                <div class="ethnicity">
                    <p class="category">Ethnicity<span>*<span></p>
                    <div class="options">
                        <input type="checkbox" id="white" class="button rect E1" name="ethnicity"></input>
                        <label for="white">White</label>
                        <input type="checkbox" id="black" class="button rect E2" name="ethnicity"></input>
                        <label for="black">Black</label>
                        <input type="checkbox" id="aboriginal" class="button rect E3" name="ethnicity"></input>
                        <label for="aboriginal">Aboriginal</label>
                        <input type="checkbox" id="metis" class="button rect E4" name="ethnicity"></input>
                        <label for="metis">Metis</label>
                        <input type="checkbox" id="asian" class="button rect E5" name="ethnicity"></input>
                        <label for="asian">Asian</label>
                    </div><!-- /.options -->
                </div><!-- /.ethnicity -->
            </section>


            <section class="others">
                <h2>There are <span class="number">56</span> MLAs that fit in your demographic</h2>
                <figcaption class="special">(Does not include the single vacant seat for the Pas or the Speaker.)</figcaption>
            </section>
        </section><!-- /.interactive -->