Versão atual:

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>

Versões (2):

Ver a versão formatada

Problema com enableFields

Comentário

new question