0

Estoy desarrollando un e-commerce desde el que el usuario tendrá que elegir un medio de pago:

introducir la descripción de la imagen aqui

Me gustaría que el usuario haga clic en el módulo "Dinheiro", el campo "Troco" para estar habilitado, y al hacer clic en otros campos, el campo "Cambiar" se deshabilita nuevamente.

Lo intenté de esta manera, pero no pude.

HTML

<form method="post">                        
<div class="deals-row">
<div class="col-md-12">
<div class="col-md-4 col-xs-12 focus-grid"> 
    <a href="#!" class="pagamento"> 
                            <i class="fa fa-qrcode fa-4x" aria-hidden="true"></i><br>
                            <label>
                                <input type="radio" id="outros" class="w3-radio" name="FormaPagamento" value="Pix"  checked  />
                                Pix
                                </label>
    </a>
</div>
<div class="col-md-4 col-xs-12 focus-grid"> 
    <a href="#!" class="pagamento"> 
        <i class="fa fa-money fa-4x" aria-hidden="true"></i><br>
        <label>
            <input type="radio" id="dinheiro" class="w3-radio" name="FormaPagamento" value="Dinheiro" onclick="desabilitar(this.checked)" />
            Dinheiro    
        </label>                        
    </a>
    <div class="input-group input-group-sm">
                <span class="input-group-addon">Troco:</span>
                <input type="text" class="form-control valorMonetario" id="troco" disabled>
            </div>          
</div>  
<div class="col-md-4 col-xs-12 focus-grid"> 
    <a href="#!" class="pagamento"> 
                            <i class="fa fa-credit-card-alt fa-4x" aria-hidden="true"></i><br>
                                <label>
                                <input type="radio"  id="outros" class="w3-radio" name="FormaPagamento" value="Cartão de Crédito"  />
                                Cartão Crédito
                                </label>
                        </a>
</div>

</div>
<div class="col-md-12">
<div class="col-md-4 col-xs-12 focus-grid"> 
    <a href="#!" class="pagamento"> 
                            <i class="fa fa-credit-card-alt fa-4x" aria-hidden="true"></i><br>
                                <label>
                                <input type="radio" class="w3-radio" name="FormaPagamento" value="Cartão de Débito"  />
                                Cartão Débito
                                </label>
                        </a>
</div>
<div class="col-md-4 col-xs-12 focus-grid"> 
    <a href="#!" class="pagamento"> 
                            <i class="fa fa-credit-card-alt fa-4x" aria-hidden="true"></i><br>
                                <label>
                                <input type="radio" class="w3-radio" name="FormaPagamento" value="Mumbuca"  />
                                Mumbuca
                                </label>
                        </a>
</div>
<div class="col-md-4 col-xs-12 focus-grid"> 
    <a href="#!" class="pagamento"> 
                            <i class="fa fa-credit-card-alt fa-4x" aria-hidden="true"></i><br>
                                <label>
                                <input type="radio" class="w3-radio" name="FormaPagamento" value="PAT"  />
                                PAT
                                </label>
                        </a>
</div>      
</div>          

<div class="text-right">
    <button type="submit" class="btn btn-primary text-uppercase" name="Submit" value="Finalizar">Finalizar Pedido <i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
</div>      
</div>                      
</form>    

Javascript

<script>
    function desabilitar(){
        if(document.getElementById('dinheiro').checked){
           document.getElementById('troco').removeAttribute("disabled");
        }
        if(document.getElementById('outros').checked){
           document.getElementById('troco').setAttribute("disabled", "disabled");
        }
    }
    </script>

1 respuesta 1

1

El problema es que solo estás asignando evento a un radio, pero debe ser a todos y con el evento change porque click solo selecciona.

Revisa los comentarios en el código y pregunta si tienes dudas.

// Obtener todas las formas de pago por nombre de campo
let pagamentos = document.querySelectorAll('[name="FormaPagamento"]');
// Obtener elementos que se van a analizar o modificar
let dinheiro = document.querySelector('#dinheiro');
let troco = document.querySelector('#troco');

// Recorrer formas de pago para asignar evento
pagamentos.forEach(pagamento => pagamento.addEventListener('change', desabilitar));

function desabilitar() {
    // Habilitar solo si se seleccionó dinheiro
    if(dinheiro.checked) {
        troco.disabled = false;
    } else {
        troco.disabled = true;
    }
    // Se puede hacer con una sola línea
    // troco.disabled = !dinheiro.checked;
}
<div class="col-md-4 col-xs-12 focus-grid"> 
    <a href="#!" class="pagamento"> 
        <i class="fa fa-money fa-4x" aria-hidden="true"></i><br>
        <label>
            <input type="radio" id="dinheiro" class="w3-radio" name="FormaPagamento" value="Dinheiro">
            Dinheiro    
        </label>                        
    </a>
    <div class="input-group input-group-sm">
                <span class="input-group-addon">Troco:</span>
                <input type="text" class="form-control valorMonetario" id="troco" disabled>
            </div>          
</div>  
<div class="col-md-4 col-xs-12 focus-grid"> 
    <a href="#!" class="pagamento"> 
                            <i class="fa fa-credit-card-alt fa-4x" aria-hidden="true"></i><br>
                                <label>
                                <input type="radio"  id="outros" class="w3-radio" name="FormaPagamento" value="Cartão de Crédito">
                                Cartão Crédito
                                </label>
                        </a>
</div>

1
  • Muchas gracias Triby.
    – JM_2021
    Commented el 26 oct. 2022 a las 17:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.