Problema com enableFields

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>
compartilhar
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags formulario enablefields javascript ou faça a sua própria pergunta.