When I click each of the checkboxes individually, everything works perfectly and with no issues. When I click the button to check them all at once, it can cause issues when there are a large number of municipalities to loop through. It causes flickering on the dropdown and prevents the user from selecting an option because the entire select gets reset. The $("#muniTable :checkbox").change() event is firing for each checkbox that gets checked. Is there a way I can run the loadDistricts() function a single time when I click the button to check all of the checkboxes at once while also keeping the functionality from the .change() event when a single checkbox is clicked?
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();
}
