2

Caros, boa tarde. Estou com a seguinte questão. Devo bloquear os outros radio buttons ao clicar no radio button da primeira checagem. Sendo assim, ao clicar no radio button prioridade1, os radio buttons prioridade2 e prioridade3 devem ficar disabilitados.

Tentei da seguinte forma:

JS

 <script type="text/javascript">
     $(document).ready(function(){
        if( $("input[type='radio'][id='prioridade1']").is(':checked')){
        document.getElementById("prioridade2").disabled=false;
        document.getElementById("prioridade3").disabled=false; 
        }
     });
</script>

HTML:

<div class="row">
<div class="col-md-3 m-b-15">

<h5>Primeira checagem</h5>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="prioridade1" value="cast(prioridade as int4) desc" name="checagem1">
      <label class="form-check-label">Prioridade</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="tentativas1" value="ivr_contatos.tentativas" name="checagem1">
      <label class="form-check-label">Tentativas</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="agendamento1" value="ivr_contatos.agendamento" name="checagem1">
      <label class="form-check-label">Agendamento</label>
    </div>
</div>

<div class="col-md-3 m-b-15">
<h5>Segunda checagem</h5>              
    <div class="form-check">
      <input type="radio" class="form-check-input" id="prioridade2" value="cast(ivr_contatos.prioridade as int4) desc" name="checagem2">
      <label class="form-check-label">Prioridade</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="tentativas2" value="ivr_contatos.tentativas" name="checagem2" >
      <label class="form-check-label">Tentativas</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="agendamento2" value="ivr_contatos.agendamento" name="checagem2">
      <label class="form-check-label">Agendamento</label>
    </div>
</div>

<div class="col-md-3 m-b-15">
 <h5>Terceira checagem</h5>              
      <div class="form-check">
      <input type="radio" class="form-check-input" id="prioridade3" value="cast(prioridade as int4) desc" name="checagem3">
      <label class="form-check-label">Prioridade</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="tentativas3" value="ivr_contatos.tentativas" name="checagem3">
      <label class="form-check-label">Tentativas</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="agendamento3" value="ivr_contatos.agendamento desc" name="checagem3">
      <label class="form-check-label">Agendamento</label>
    </div>
</div>

Entretanto não estou conseguindo atingir o resultado esperado. Existe alguma forma mais simples de realizar esse procedimento?

7
  • Se possível exemplifique melhor. Commented 24/08/2018 às 18:13
  • editei a pergunta amigo Commented 24/08/2018 às 18:14
  • Porque você não captura o evento onchange do Radio e desabilita-os? Commented 24/08/2018 às 18:18
  • @AndreMesquita Eu não faço a minima ideia de como capturar esses eventos haha vou procurar sobre, é possível fazer literalmente ao evento click? Commented 24/08/2018 às 18:23
  • ao clicar no radio button prioridade1, os radio buttons prioridade2 e prioridade3 devem ficar disabilitados, e quanto aos demais radios button?
    – user60252
    Commented 24/08/2018 às 19:21

2 Respostas 2

3

Vou postar um exemplo:

No seu caso aí vai ficar $("#prioridade2, #prioridade3").attr("disabled", true);

Não precisa do .not(this);

$(document).ready(function(){

  $("#prioridade1").on("click", function() { //pega o click do input de checagem
    $("input").not(this).attr("disabled", true); // desabilita os inputs menos o clicado
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
<div class="col-md-3 m-b-15">

<h5>Primeira checagem</h5>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="prioridade1" value="cast(prioridade as int4) desc" name="checagem1">
      <label class="form-check-label">Prioridade</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="tentativas1" value="ivr_contatos.tentativas" name="checagem1">
      <label class="form-check-label">Tentativas</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="agendamento1" value="ivr_contatos.agendamento" name="checagem1">
      <label class="form-check-label">Agendamento</label>
    </div>
</div>

7
  • A ideia é essa, pelo código, entretanto ao clicar ele ainda deixa eu selecionar os demais, quando tento utilizar essa biblioteca, ele da erro no console . Commented 24/08/2018 às 18:35
  • Vc é novo com jQuery?? Tem que carregar o jQuery antes de qualquer outra tag javascript, senão dá erro mesmo.
    – LeAndrade
    Commented 24/08/2018 às 18:38
  • sou sim, tenho pouca experiencia com Jquery, coloquei ele no começo de tudo antes de iniciar as chamadas e funcionou. mas ainda esta selecionando os demais campos. Commented 24/08/2018 às 18:39
  • Se colocar certinho assim é para funcionar $("#prioridade1").on("click", function() { $("#prioridade2, #prioridade3").attr("disabled", true); }
    – LeAndrade
    Commented 24/08/2018 às 18:42
  • de fato, segui seu exemplo e vi que funciona, mas ao passar para meu codigo, ele continua marcando os demais. Eu devo deixar no head da pagina ou posso deixar no final? afinal apenas é uma declaração dentro do <script type="text/javascript></script> certo? Commented 24/08/2018 às 18:45
2

$(document).ready(function(){
   $(".row").find("input[type='radio']").click(function(){
     //desmarca todos com a classe form-check-input
     $(".form-check-input").prop( "checked", false );
     //marca o clicado
     $(this).prop( "checked", true );
     //valor do id do input marcado
     var valorId = ($(this).attr("id"));
     //retira o numero do final do valor do id
     var substrValorId = valorId.substring(0,(valorId.length - 1));

     //necessário quando selecionar outro input
     $('.form-check-input').removeAttr("disabled");
     //desabilita os xaras :D
     for (var i = 1; i <= 3; i++) {
        document.getElementById(substrValorId+i).disabled = true;
     }
   
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
<div class="col-md-3 m-b-15">

<h5>Primeira checagem</h5>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="prioridade1" value="cast(prioridade as int4) desc" name="checagem1">
      <label class="form-check-label">Prioridade</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="tentativas1" value="ivr_contatos.tentativas" name="checagem1">
      <label class="form-check-label">Tentativas</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="agendamento1" value="ivr_contatos.agendamento" name="checagem1">
      <label class="form-check-label">Agendamento</label>
    </div>
</div>

<div class="col-md-3 m-b-15">
<h5>Segunda checagem</h5>              
    <div class="form-check">
      <input type="radio" class="form-check-input" id="prioridade2" value="cast(ivr_contatos.prioridade as int4) desc" name="checagem2">
      <label class="form-check-label">Prioridade</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="tentativas2" value="ivr_contatos.tentativas" name="checagem2" >
      <label class="form-check-label">Tentativas</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="agendamento2" value="ivr_contatos.agendamento" name="checagem2">
      <label class="form-check-label">Agendamento</label>
    </div>
</div>

<div class="col-md-3 m-b-15">
 <h5>Terceira checagem</h5>              
      <div class="form-check">
      <input type="radio" class="form-check-input" id="prioridade3" value="cast(prioridade as int4) desc" name="checagem3">
      <label class="form-check-label">Prioridade</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="tentativas3" value="ivr_contatos.tentativas" name="checagem3">
      <label class="form-check-label">Tentativas</label>
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input" id="agendamento3" value="ivr_contatos.agendamento desc" name="checagem3">
      <label class="form-check-label">Agendamento</label>
    </div>
</div>

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 .