How to make progress bar work on multiple checkbox checked?
$('.card').each(function(index, el) {
var chkLength = $(this).find('input[type="checkbox"]').length;
var max = 100;
var div = max / chkLength;
$('.scrumboard .card .task-quantity').text('0/' + chkLength);
$(this).find('input[type="checkbox"]').attr('value', div);
});
$('.card .new-control-input').on('change', function(event) {
var $checkbox = $(this);
$checkbox.closest('.card').find(".progress .progress-bar").css("width", function() {
var width = $(this).data('width') || 0;
if ($checkbox.is(':checked')) {
width += parseInt($checkbox.val());
} else {
width -= parseInt($checkbox.val());
}
$(this).data('width', width);
return width + "%";
});
})