How to make two Radiobuttons enable and disable fields

Question

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 disabled. When you click on the second radio button 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 method onclick="TipoPesquisa() which is doubt.

Answer 1

Here’s a snippet with an example of how to do this using jquery, note that I added two classes(.grupoA, .grupoB) to differentiate the input's, so it becomes easier to manipulate them, the validation is simple, when the radio button Periodo is marked, enable the class elements .grupoA and disable class elements .grupoB using the method prop(), when the radio button Mesano is marked, 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>
<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>
<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>