使用Underscore将检查的输入限制为if语句中的两个

Question

我被困在哪里

我希望这样做，以便当用户从侧边栏中的“种族”类别中选择一个选项时，他们可以在无法选择其他选项之前选择最多两个。

现在，你可以选择两个以上的选项，所以我想知道如何更改我的if语句以反映这一点。以前，我尝试了以下代码块，它是在然而，正确的轨道，它无助于跟踪选定种族的政治家的数量，这些政治家在index.html

中呈现

以前

$("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

这是我一直在努力的JSFiddle：http://jsfiddle.net/zqu7r9so/

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 -->