当同时触发多个更改事件时，如何防止函数多次运行？

Question

当我单独单击每个复选框时，一切正常且没有问题。 当我单击按钮一次检查它们时，当有大量市政当局循环时可能会导致问题。 它会导致下拉列表闪烁并阻止用户选择选项，因为整个选择都被重置。 $("#muniTable :checkbox").change()事件为每个被选中的复选框触发。 当我单击按钮以一次检查所有复选框时，有没有办法可以一次运行loadDistricts()函数，同时在单击单个复选框时还保留 .change() 事件的功能？

HTML：

<div class="row">
    <div class="col-10 search-card-container">
        <div class="kt-section__content kt-section__content--border">
            <div class="card w-100">
                <div class="card-body card-enabled">
                    <div class="row card-title search-card-header filter-card">
                        <div class="col-11">
                            <label>Municipalities</label>
                        </div>
                    </div>
                    <div class="row" id="muniTable">
                        <div class="col-3 muni-row">
                            <label for="Municipalities_0__Selected">
                                <label class="kt-checkbox kt-checkbox--brand"><input type="checkbox" data-val="true" data-val-required="The Selected field is required." id="Municipalities_0__Selected" name="Municipalities[0].Selected" value="true"> 002 - TOWN OF TEST1<span></span></label>
                            </label>
                            <input type="hidden" data-val="true" data-val-required="The Text field is required." id="Municipalities_0__Text" name="Municipalities[0].Text" value="002 - TOWN OF TEST1">
                            <input type="hidden" class="muni-code" data-val="true" data-val-required="The Code field is required." id="Municipalities_0__Code" name="Municipalities[0].Code" value="002">
                            <input type="hidden" data-val="true" data-val-required="The ID field is required." id="Municipalities_0__ID" name="Municipalities[0].ID" value="0">
                        </div>
                        <div class="col-3 muni-row">
                            <label for="Municipalities_1__Selected">
                                <label class="kt-checkbox kt-checkbox--brand"><input type="checkbox" data-val="true" data-val-required="The Selected field is required." id="Municipalities_1__Selected" name="Municipalities[1].Selected" value="true"> 004 - TOWN OF TEST2<span></span></label>
                            </label>
                            <input type="hidden" data-val="true" data-val-required="The Text field is required." id="Municipalities_1__Text" name="Municipalities[1].Text" value="004 - TOWN OF TEST2">
                            <input type="hidden" class="muni-code" data-val="true" data-val-required="The Code field is required." id="Municipalities_1__Code" name="Municipalities[1].Code" value="004">
                            <input type="hidden" data-val="true" data-val-required="The ID field is required." id="Municipalities_1__ID" name="Municipalities[1].ID" value="0">
                        </div>
                        <div class="col-3 muni-row">
                            <label for="Municipalities_2__Selected">
                                <label class="kt-checkbox kt-checkbox--brand"><input type="checkbox" data-val="true" data-val-required="The Selected field is required." id="Municipalities_2__Selected" name="Municipalities[2].Selected" value="true"> 006 - TOWN OF TEST3<span></span></label>
                            </label>
                            <input type="hidden" data-val="true" data-val-required="The Text field is required." id="Municipalities_2__Text" name="Municipalities[2].Text" value="006 - TOWN OF TEST3">
                            <input type="hidden" class="muni-code" data-val="true" data-val-required="The Code field is required." id="Municipalities_2__Code" name="Municipalities[2].Code" value="006">
                            <input type="hidden" data-val="true" data-val-required="The ID field is required." id="Municipalities_2__ID" name="Municipalities[2].ID" value="0">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 text-right">
                            <input type="button" class="btn btn-primary" value="Check All" onclick="checkBoxes(this)">
                            <input type="button" class="btn btn-primary" value="UnCheck All" onclick="uncheckBoxes(this)">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="button" class="btn btn-primary" value="Check All" onclick="checkBoxes(this)">

Javascript：

function loadDistricts() {
    //Array of municipality codes
    var munis = new Array();
    //checking value of checked
    $("input:checkbox:checked").each(function() {
        var value = $(this).val(); //value of checkbox
        var $selector = $(this).closest('.muni-row');
        var text = $selector.find(".text").val(); //getting value of text
        var ids = $selector.find(".ids").val(); //getting value of ids
        var municode = $selector.find(".muni-code").val(); //getting value of municode

        munis.push(municode);
    });

    $.ajax({
    type: 'POST',
    data: {
        muniSelections: munis
    },
    url: '@Url.Action("STBGetDistrictsByMunicipality", ViewContext.RouteData.Values["Controller"].ToString())',
    beforeSend: function () {
        //Update districts list while districts are loading
        $('#SelectedDistrict').append($("<option></option>")
            .attr("value", "")
            .text("Loading Districts.."));
    },
    success: function(data) {
        var select = $('#SelectedDistrict');
        //Clear select list of any options already in the list
        select.find('option').remove();
        $.each(data.districts, function(index, x) {
            select.append($("<option></option>")
            .attr("value", x.DistrictId)
            .text(x.DistrictStateCodeDescriptionString));
        });
    }
    });
}

$("#muniTable :checkbox").change(function(e) {
    loadDistricts();
});

function checkBoxes(button) {
    //go back to the parent div, and check all checkbox children
    $(button).parents().eq(3).find("input:checkbox").prop("checked", true).change();
}

function uncheckBoxes(button) {
    //go back to the parent div, and uncheck all checkbox children
    $(button).parents().eq(3).find("input:checkbox").prop("checked", false).change();
}

Answer 1

我通过将.change()更改为.on('click')并添加另一个调用来通过单击按钮加载区来解决此问题。