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

Question

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 that when selecting the radiobutton "Input", the form "Expense Value" becomes disabled, and vice versa.

Someone can give me a light?

Answer 1

Add onchange="modSaida(this)" both of us 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>

Answer 2

You can do the following method which 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 would only need to add an onclick to your radios to call the method whenever you click on any of them:

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

I just suggest that you give each of these elements a unique ID, it’s more organized. Then you could use Document.getElementById, that the code will become clearer.