Tenho o seguinte HTML:
<form action="{% url 'cadastra_presenca' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
{% for alunos in curso %}
<td class="tbody-column">
<label style="display: flex; justify-content: center;">
<input type="checkbox" class="presenca[]" checked value="P" name="confirma_presenca_aluno">
<input class="ausencia" type='hidden' value='F' name='confirma_presenca_aluno'>
</label>
</td>
{% endfor %}
<tr style="display: flex; justify-content: center;width: 100%;">
<input type="submit" class="botao-cadastro" value="OK">
</tr>
</form>
Tenho o seguinte JS:
presenca.forEach(function(p){
p.addEventListener('click',function(){
if(p.checked){
const hidden= this.parentNode;
hidden.querySelector('.ausencia').disabled=true;
}else{
const hidden= this.parentNode;
hidden.querySelector('.ausencia').disabled=false;
}
})
})
Pego dados de um banco, para gerar minhas linhas de tabela, cada uma com seu checkbox. Por padrão todos os checkbox estão "checked". Caso eu desmarque 1 ele deveria ficar com o valor do input hidden. Entretanto quando capturo o array com os values de cada checkbox, ele me retorna aleatoriamente um 'F' e um 'P', fugido completamente do comportamento desejado.
Quero que os marcados tenham o valor 'P' e os desmarcados tenham o valor 'F'... para que eu possa capturar corretamente os valores desses inputs e jogar no banco. Alguma sugestão?