How to make two RadioButtons enable and disable fields

Question

How to make two RadioButtons enable and disable fields

Navigation

#1 by (1 votes)

1

Each radio button enables and disables two fields, two by two. When the first radio is clicked the first two textBox are enabled and the last two are deactivated. When the second radio button is clicked the first two textBox are disabled and the last two are enabled.

 <div class="row">
    <div class="col-md-12">
        <h5>Tipo de pesquisa:</h5>

        <div class="radio radio-inline pesquisa">
            <input type="radio" name="optradio" value="Periodo" id="Periodo" onclick="TipoPesquisa()">
            <label for="Periodo">Período</label>
        </div>

        <div class="radio radio-inline pesquisa">
            <input type="radio" name="optradio" value="MesAno" id="MesAno" onclick="TipoPesquisa()">
            <label for="MesAno">Mês/Ano</label>
        </div>

        <span id="tipoPesquisaVazio" class="text-danger" style="display: none">
            Uma tipo de pesquisa deve ser selecionado.
        </span>
    </div>
</div>

The onclick="TipoPesquisa() method is the doubt.

javascript jquery razor

asked by anonymous 23.05.2017 / 19:08

1 answer

Using @import in CSS Query rows having maximum value in a column

score 1 · Accepted Answer

Here's a snippet with an example of how to do this using jquery, note that I've added two classes ( .grupoA , .grupoB ) to differentiate input's , so it's easier to manipulate them, validation is simple , when the radio button Period is checked, I enable the elements of the .grupoA class and disable the elements of the .grupoB class using the prop() , when the radio button MesAno is checked, the opposite is done.

function TipoPesquisa() {
  if ($('#Periodo').is(':checked')) {
    $(".grupoA").prop('disabled', false);
    $(".grupoB").prop('disabled', true);
  } else if ($('#MesAno').is(':checked')) {
    $(".grupoA").prop('disabled', true);
    $(".grupoB").prop('disabled', false);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="row">
  <div class="col-md-12">
    <h5>Tipo de pesquisa:</h5>

    <div class="radio radio-inline pesquisa">
      <input type="radio" name="optradio" value="Periodo" id="Periodo" onclick="TipoPesquisa()">
      <label for="Periodo">Período</label>
    </div>

    <div class="radio radio-inline pesquisa">
      <input type="radio" name="optradio" value="MesAno" id="MesAno" onclick="TipoPesquisa()">
      <label for="MesAno">Mês/Ano</label>
    </div>

    <span id="tipoPesquisaVazio" class="text-danger" style="display: none">
                                Uma tipo de pesquisa deve ser selecionado.
                            </span>
  </div>
</div>
<br> 1: <input type="text" class="grupoA"><br> 2: <input type="text" class="grupoA"><br>
<br> 3: <input type="text" class="grupoB"><br> 4: <input type="text" class="grupoB"><br>