Проверено = true не работает вместе с другими событиями на том же элементе
Я использую Django inline formsets и пытаюсь использовать флажок delete динамически с помощью Javascript. Все работает, как и должно, однако свойство checked = true (хотя в консоли оно показывает true) не устанавливает флажок, пока присутствуют updateSunForm() и totalForms.setAttribute(...).
{% load crispy_forms_tags %}
{% load static %}
{% block content %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/availability_update_new.css' %}">
</head>
<body>
<form id="all-add-form" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<legend class="bottom mb-4">Profiles Info</legend>
{{ sun_bool.sunday|as_crispy_field }}
{{ sunday_formset.management_form }}
{% for sun_form in sunday_formset %}
{% for hidden in sun_form.hidden_fields %}
{{ hidden }}
{% endfor %}
<div class="sun_time_slot_form">
{{ sun_form }}
<button class="delete-sun-form" type="button" id="delete-sun-btn" onclick="one();"> Delete This Sunday Timeslot
</button>
</div>
{% endfor %}
<button id="add-sun-form" type="button" class="button">Add Other Sunday Times</button>
<input type="submit" name="submit" value="Submit" class="btn btn-primary"/>
</form>
<script type="text/javascript" src="{% static 'js/add_timeslot.js' %}"></script>
</body>
</html>
{% endblock content %}
const sunForm = document.getElementsByClassName('sun_time_slot_form');
const mainForm = document.querySelector('#all-add-form');
const addSunBtn = document.querySelector("#add-sun-form");
const submitFormBtn = document.querySelector('[type="submit"]');
const totalForms = document.querySelector("#id_id_sunday_formset-TOTAL_FORMS");
let formCount = sunForm.length - 1;
addSunBtn.addEventListener('click', function (e) {
e.preventDefault();
const newSunForm = sunForm[0].cloneNode(true);
const formRegex = RegExp(`id_sunday_formset-(\\d){1}-`, 'g');
formCount++;
newSunForm.innerHTML = newSunForm.innerHTML.replace(formRegex,
`id_sunday_formset-${formCount}-`);
mainForm.insertBefore(newSunForm, submitFormBtn);
totalForms.setAttribute('value', `${formCount + 1}`);
});
function updateSunForm() {
let count = 0;
for (let sun_form of sunForm) {
const sunFormRegex = RegExp(`id_sunday_formset-(\\d){1}-`, 'g');
sun_form.innerHTML = sun_form.innerHTML.replace(sunFormRegex,
`id_sunday_formset-${count++}-`)
}
}
mainForm.addEventListener('click', (ee) => {
if (ee.target.classList.contains('delete-sun-form')) {
ee.preventDefault();
ee.target.value;
ee.target.parentElement.querySelector('input[id$="-DELETE"]' +
'[type="checkbox"]').checked = true;
ee.target.parentElement.style.display = "none";
formCount--;
updateSunForm();
totalForms.setAttribute('value', `${formCount + 1}`);
}
});
Я перепробовал множество вариантов манипуляций с DOM, но, похоже, ничего не помогает.