Как увеличить значения флажков с помощью jquery?

Question

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

$('.add-extra-email-button').click(function() {
  $('.clone_edilecek_email').clone(true, true).appendTo('.clone_edilen_email');
  $('.clone_edilen_email .clone_edilecek_email').addClass('single-email remove-email');
  $('.single-email').append('<div class="btn-delete-branch-email"><button class="remove-field-email btn btn-danger"><i class="fas fa-trash"></i></button></div>');
  $('.clone_edilen_email > .single-email').attr("class", "remove-email");
  $('.clone_edilen_email input').each(function() {
    if ($(this).val() == "") {
      $(".add-extra-email-button").attr("disabled", true);
    } else {
      $(".add-extra-email-button").attr("disabled", true);
    }
    $(".remove-email:last").find('.email-address').val('');
  });
});

<div class="col-md-6">
  <div class="clone_edilecek_email">
    <div class="form-group">
      <label for="name">E-posta</label>
      <div class="input-group">
        <input type="email" class="form-control email-address" name="email[]" placeholder="E-Posta giriniz">
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
          <label class="btn btn-secondary">
            <input type="checkbox" name="ban[]" value="1" autocomplete="off">
            <span class="fas fa-ban"></span>
          </label>
          <label class="btn btn-secondary">
            <input type="checkbox" name="circle[]" autocomplete="off">
            <span class="fas fa-exclamation-circle"></span>
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="text-left">
    <button type="button" class="add-extra-email-button btn btn-success" disabled><i class="fas fa-plus"></i></button>
  </div>
  <div class="clone_edilen_email"></div>
</div>

Answer 1

Вы должны установить индекс в скобках, например:

<input type="checkbox" name="circle[0]" autocomplete="off"> <span class="fas fa-exclamation-circle"></span>

Почему? в противном случае будут отправлены только выбранные флажки и серверная часть. Браузер отправит только те 2 флажка, которые установлены на сервер / сервер. сервер, чем не знает, какой из индексов флажка, где проверено. вот почему в веб-интерфейсе вам нужно указывать индекс для каждого флажка.

Предупреждение: не все бэкэнды понимают этот вид имен форм (но большинство понимают).

вы можете сделать это следующим образом::

var index =1;
$('input').each(function(inputElement) {
  // execute the function for each input element. (might want to do the same for select elements.

  // take the name of that element
  var name = $(inputElement).prop('name');

 // replace [] with the index you want// (warning this only works if you dont use multi dimensional arrays.
  var newName = name.relace('[]','['+index+']');

  // replace the old name with the new name.
  $(inputElement).prop('name',newName);
});

обратите внимание, что вы можете использовать такую ​​функцию:

function setIndeces(container, index){
  $('input',container).each(function(inputElement){
    var name = $(inputElement).prop('name');
    var newName = name.relace('[]','['+index+']');
    $(inputElement).prop('name',newName);
  });
}

setIndeces($('newAddedDiv', 1);