JSFiddle - React, Tailwind, and code Playground
JavaScript
$(document).on('click', '.sfilters', function(){
if($(this).hasClass("sfilters-selected")){$(this).removeClass("sfilters-selected");} else {
$('[data-group='+$(this).attr('data-group')+']').removeClass("sfilters-selected");
$(this).addClass('sfilters-selected');
}
$('#cfilters').val('');
if($(".sfilters").hasClass("sfilters-selected")){$( "#savebutton" ).val('Сохранить'); $( "#savebutton" ).attr('disabled', false);} else {
$( "#savebutton" ).val('Сохранение невозможно, выберите хотя бы один параметр'); $( "#savebutton" ).attr('disabled', true);
}
let filters1 = '';
$('.sfilters').each(function () {
if($(this).hasClass("sfilters-selected")){
filters1 = String(filters1 == '' ? '' : filters1 + '_') + String($(this).attr('data-value'));
$('#cfilters').val($('#cfilters').val() + String($(this).attr('data-group')) + '_' + String($(this).attr('data-value')) + '|');
}
});
let cfilters = $('#cfilters').val();
if(filters1 != '') {$('#cfilters').val(cfilters.slice(0, -1));}
if(filters != '') {
filters.forEach(function(item, i, filters) {
if(filters1 == item) {
$( "#savebutton" ).val('Сохранение невозможно, такой подтовар уже имеется'); $( "#savebutton" ).attr('disabled', true);
}
});
}
});