Why reset the value when the checkbox change event and send the ajax?

Good time of day.
Implement sending ajax request when clicking on checkbox

<div id="div-pay">
 <div class="deliveri-block">
 <div id="deliveri-list">
 <? foreach ($arResult['DELIVERY_LIST'] as $arDelivery):?>
<label>
 <input type="radio" name="delivery_id" class="deliveri-el"
 value="<?= $arDelivery['ID'] ?>">
 <?= $arDelivery['NAME'] ?>,
 <?= $arDelivery['PRICE_DISPLAY'] ?>
</label>
<br / >
 <? endforeach; ?>
</div>
</div>

 <div class="payment-block">
 <div id="payment-list">
 <? foreach ($arResult['PAY_SYSTEM_LIST'] as $arPaySystem): ?>
<label>
 <input type="radio" name="pay_system_id"
 value="<?= $arPaySystem['ID'] ?>"
 <?= $arPaySystem['CHECKED'] ? 'checked' : "?>>
 <?= $arPaySystem['NAME'] ?>
</label>
<br / >
 <? endforeach; ?>
</div>
</div>
</div>


checkboxes = Array.from(document.querySelectorAll('.deliveri-el'));
checkboxes.forEach(function(checkbox, i) {

 checkbox.onchange = function() {

$.ajax({
 url: BX.message('TEMPLATE_PATH') + "/ajax.php",
 type: 'POST',
 data: {
 settings: this.name
 id: this.value
 checked: this.checked ? 1:0,
 delivery_id: $(this).val()
},
 beforeSend: function() { checkbox.disabled = true; },
 complete: function() { checkbox.disabled = false; },
 success: function(response) {
$('#payment-list').html(response);
}
});
}
});

I tried different ways, but in all cases once will only render the ajax response, then the checkbox stops marked..
It looks like this
5e4b52c0df23a847462900.png
after I clicked on one of the deliveries..
Please tell me.
April 7th 20 at 15:36
1 answer
April 7th 20 at 15:38
Solution
UPD. In General, the error was gone once I changed the name attribute to another. Although previous ANYWHERE else is not involved. XS what was the error. Thanks for the tips.

Find more questions by tags 1C-BitrixJavaScript