Estou tendo problemas ao usar o enableFields neste formulário.
Todos os campos são bloqueados normalmente, mas quando aplicado no campo "RECEBMAT_TIPO" o JS deixa de funcionar e o segundo card "TIPO_DEV" não aparece mais nas outras atividades.
<div class="card">
<div class="card-header bg-secondary text-white">
<li ><b>Tipo do Recebimento</b></li>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm">
<input type="radio" name="RECEBMAT_TIPO" value="Normal"><b>Normal (Revenda / Estoque)</b >
</div>
<div class="col-sm">
<input type="radio" name="RECEBMAT_TIPO" value="Industrialização"><b>Industrialização</b>
</div>
<div class="col-sm">
<input type="radio" name="RECEBMAT_TIPO" value="Devolução"><b>Devolução</b>
</div>
<div class="col-sm">
<input type="radio" name="RECEBMAT_TIPO" value="Recusa"><b>Recusa</b>
</div>
</div>
</div>
</div>
<br>
<div class="card" id="TIPO_DEV" style="display: none">
<div class="card-header bg-secondary text-white">
<li><b>Tipo de Devolução</b></li>
</div>
<div class="card-body">
<div class="form-row" >
<div class="col-sm">
<input type="radio" name="RECEBMAT_DEV" value="Total"><b>Total</b >
</div>
<div class="col-sm">
<input type="radio" name="RECEBMAT_DEV" value="Parcial"><b>Parcial</b >
</div>
</div>
</div>
</div>
Este JS tem o objetivo de exibir ou ocultar o segundo card "TIPO_DEV" dependendo do input selecionado no primeiro card. (EX: "Normal" -> oculta / "Devolução" -> exibe)
<script>
const inputs = [...document.getElementsByName('RECEBMAT_TIPO')];
const card = document.getElementById('TIPO_DEV');
inputs.forEach(i => i.addEventListener('change', e => {
if (e.target.value === 'Devolução') card.style.display = 'block'
else card.style.display = 'none'
}));
const checked = inputs.filter(i => i.checked).some(i => i.value === 'Devolução');
if (checked) {
card.style.display = 'block';
}
</script>