Lock RadioButton when selecting another radio button

Navigation
2
Expensive, good afternoon. I have the following question. I should block the other radio buttons by clicking on the radio button of the first check. Therefore, when you click on the radio button, priority1, the radio buttons priority2 and priority3 must be disabled.

I tried the following:

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>

However, I am not able to achieve the expected result. Is there a simpler way to do this?

    
asked by anonymous 24.08.2018 / 20:07

2 answers

3

I'll post an example:

  

In your case there will be $("#prioridade2, #prioridade3").attr("disabled", true);

     

You do not need .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><divclass="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>
    
24.08.2018 / 20:26
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><divclass="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>
    
24.08.2018 / 23:30
V10 Extensibility in Administrator: Error "Classes can inherit only from other classes" How to get value from a variable by file_get_contents