I need to reduce my jQuery. I have three checkboxes addicted to my filters, so I want to hide a particular checkbox on pages where the filter dosen't exist, by default in my native code , all of them are displayed. Down below is the code.
$('#select-modification').on('change', '#none-checkbox, #vin-checkbox, #heat-checkbox, #rain-checkbox', function(e) {
var $noneCheckbox = $('#none-checkbox');
var $vinCheckbox = $('#vin-checkbox');
var $rainCheckbox = $('#rain-checkbox');
var $heatCheckbox = $('#heat-checkbox');
var $vinLabel = $('#vin-label');
var $rainLabel = $('#rain-label');
var $heatLabel = $('#heat-label');
var noneStatus = $noneCheckbox.is(':checked');
var vinStatus = $vinCheckbox.is(':checked');
var rainStatus = $rainCheckbox.is(':checked');
var heatStatus = $heatCheckbox.is(':checked');
if ($(this).attr('id') == 'none-checkbox' && noneStatus == true) {
$vinCheckbox.attr('disabled', 'disabled');
$rainCheckbox.attr('disabled', 'disabled');
$heatCheckbox.attr('disabled', 'disabled');
$vinCheckbox.removeAttr('checked');
$rainCheckbox.removeAttr('checked');
$heatCheckbox.removeAttr('checked');
$vinLabel.addClass('disabled');
$rainLabel.addClass('disabled');
$heatLabel.addClass('disabled');
}
if ($(this).attr('id') == 'none-checkbox' &&noneStatus == false) {
$vinCheckbox.removeAttr('disabled');
$rainCheckbox.removeAttr('disabled');
$heatCheckbox.removeAttr('disabled');
$vinLabel.removeClass('disabled');
$rainLabel.removeClass('disabled');
$heatLabel.removeClass('disabled');
}
if (noneStatus || vinStatus || rainStatus || heatStatus) {
$('.table tbody tr').each(function(index, element) {
var $element = $(element);
var total = 0;
var needed = noneStatus + vinStatus + rainStatus + heatStatus;
if (noneStatus && $element.hasClass('has-none')) {total += 1; }
if (vinStatus && $element.hasClass('has-vin')) {total += 1; }
if($('tr.has-rain') == false){
$('#has-rain').hide();
}
if (rainStatus && $element.hasClass('has-rain')) {total += 1; }
if($('tr.has-heat') == false){
$('#has-heat' + $rainCheckbox).hide();
}
if (heatStatus && $element.hasClass('has-heat')) {total += 1; }
if (total == needed) {
$element.css('display', 'table-row');
} else {
$element.css('display', 'none');
}
})
} else {
$('.table tbody tr').each(function(index, element) {
$(element).css('display', 'table-row')
});
}
});
})( jQuery );
