How to give a disabled in a form depending on which radio button to choose?

1

Good afternoon ...

I have the following radio buttons:

<input type="radio" name="radio1" value="entrada"> Entrada
<input type="radio" name="radio1" value="saida"> Saida

I also have the following forms:

 <div class="form-group">
        <label style="color:white" for="valor">Valor Entrada</label>
        <div class="input-group">
            <input type="number" class="form-control" step="any" name="valor" required ng-model="divida.valorentrada" required>
        </div>
 </div>

 <div class="form-group">
            <label style="color:white" for="valor">Valor Despesa</label>
            <div class="input-group">
                <input type="number" class="form-control" step="any" name="valor" required ng-model="divida.valorsaida" required>
            </div>
 </div>

I need to make the form "Value Expense" disabled by selecting the "Entry" radio button, and vice versa.

Can someone give me a light?

    
asked by anonymous 14.11.2017 / 20:49

2 answers

1

Add onchange="modSaida(this)" to two radios and add the function below in script :

function modSaida(i){
   campo = document.querySelector("input[ng-model='contato.valorsaida']");
   campo.disabled = i.value == "entrada" ? true : false;
}
<input onchange="modSaida(this)" onchange="modSaida(this)" type="radio" name="radio1" value="entrada"> Entrada
<input onchange="modSaida(this)" type="radio" name="radio1" value="saida"> Saida
<br />

<div class="form-group">
   <label style="color:white" for="valor">Valor Entrada</label>
   <div class="input-group" id="entrada">
      <input type="number" class="form-control" step="any" name="valor" required ng-model="contato.valor" required>
   </div>
</div>

<div class="form-group">
   <label style="color:white" for="valor">Valor Despesa</label>
   <div class="input-group" id="saida">
      <input type="number" class="form-control" step="any" name="valor" required ng-model="contato.valorsaida" required>
   </div>
</div>
    
15.11.2017 / 01:26
0

You can do the following method that checks which radio is checked and disables the corresponding form:

<script>
    function alterarDisable() {
        var radios = document.getElementsByName("radio1");
        if (radios[0].checked) {
            document.getElementsByClass("form-group")[0].disabled = true;
            document.getElementsByClass("form-group")[1].disabled = false;
        }
        else if (radios[1].checked) {
            document.getElementsByClass("form-group")[1].disabled = true;
            document.getElementsByClass("form-group")[0].disabled = false;
        }
    }
</script>

Then you just need to add an onclick on your radios to call the method whenever you click on one of them:

<input type="radio" name="radio1" value="entrada" onclick="alterarDisable()">
<input type="radio" name="radio1" value="saida" onclick="alterarDisable()">

I just suggest you give a unique ID to each of these elements, it gets more organized. Then you could use document.getElementById, that code will become clearer.

    
14.11.2017 / 22:04