1

Cada radio button habilita e desabilita dois campos, dois a dois. Quando o primeiro radio é clicado os dois primeiros textBox são habilitados e os dois últimos desabibilitados. Quando se clica no segundo radio button os dois primeiros textBox ficam desabilitados e os dois últimos ficam habilitados.

 <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>

O método onclick="TipoPesquisa() que é a dúvida.

1 Resposta 1

1

Segue um snippet com um exemplo de como fazer isso utilizando jquery, nota que adicionei duas classes(.grupoA, .grupoB) para diferenciar os input's, assim fica mais fácil de manipulá-los, a validação é simples, quando o radio button Periodo for marcado, habilito os elemento da classe .grupoA e desabilito os elementos da classe .grupoB utilizando o método prop(), quando o radio button MesAno é marcado, o contrário é feito.

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>

1
  • @GeissonLucasOliveira edita a pergunta e coloca lá ai eu edito a resposta, fica melhor assim. =)
    – Mathiasfc
    Commented 23/05/2017 às 17:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .