Как заставить индикатор выполнения работать на нескольких отмеченных флажках?

Question

Я установил индикатор выполнения на флажок.Он отлично работает с одной группой флажков, но с несколькими группами флажков он не работает в соответствии с указаниями.

Что я хочу

Я хочу, если я использую несколько карт ив каждой карточке будет несколько флажков, все они должны работать отдельно

$('.card').each(function(index, el) {
  // console.log( $(this).find('input[type="checkbox"]').length );
  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"]').append("<div>" + div +" </div>");
  $(this).find('input[type="checkbox"]').attr('value', div);
});

// Progress bar code
val = 0;
$('.card .new-control-input').on('change', function(event) {
  if ($(this).is(':checked')) {
    console.log('chk');
    // perc += parseInt($(this).val());
    // $(this).attr('checked', '');
    console.log(val += parseInt($(this).val()));
  } else {
    console.log('nchk');
    console.log(val -= parseInt($(this).val()));
  }

  $(".progress .progress-bar").each(function(index, el) {
    $(this).css("width", val + "%");
  });
})

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <p class="task-quantity"></p>
</div>
<div class="card">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <div class="progress">
    <div class="progress-bar bgbbg-primary" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <p class="task-quantity"></p>
</div>

Ссылка

Answer 1

Проблема заключается в том, что вы обновляете все элементы .progress .progress-bar в DOM при срабатывании события change.Вместо этого вам нужно использовать обход DOM, чтобы найти индикатор выполнения, связанный с флажком, вызвавшим событие.Для этого вы можете использовать closest() для получения родительского элемента .card, затем find().

Вам также нужно будет поддерживать каждый width отдельно, вместо общей переменной val.Для этого вы можете использовать атрибут data, который хранится непосредственно на индикаторе выполнения.Попробуйте это:

$('.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 + "%";
  });
})

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="card">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <p class="task-quantity"></p>
</div>

<div class="card">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <div class="progress">
    <div class="progress-bar bgbbg-primary" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <p class="task-quantity"></p>
</div>