Estoy desarrollando un e-commerce desde el que el usuario tendrá que elegir un medio de pago:
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>