Lock Radiobutton when selecting another radio button

Asked

Viewed 843 times

2

Good afternoon. I have the following question. I must block the other radio Buttons by clicking on the radio button of the first check. Therefore, by clicking on the radio button prioritity1, the radio Buttons prioritity2 and prioritity3 should be disabled.

I tried it this way:

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 achieving the expected result. Is there any simpler way to perform this procedure?

javascript html5

  • If possible exemplify better.

  • edited the question friend

  • Why you do not capture the onchange event from Radio and disable them?

  • @Andremesquita I have no idea how to capture these events haha I will look about, it is possible to literally make the event click?

  • when clicking on the radio button prioritity1, the radio Buttons prioritity2 and prioritity3 should be disabled, and the other radio buttons?

  • should be active, the idea is to block only those who have the same 'name', for example by clicking on tentative1 or tentative2 and tentatives3 should block, the same for scheduling.

  • Test my answer, qq thing me a feedback!

Show 2 more comments

2 answers

3

I’ll post an example:

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

You don’t need the .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>

  • The idea is this, by the code, however when clicking it still lets me select the others, when I try to use this library, it error in the console .

  • Are you new with jQuery?? You have to load jQuery before any other tag javascript, otherwise it’s really wrong.

  • I am, I have little experience with Jquery, I put it at the beginning of everything before starting the calls and it worked. but it is still selecting the other fields.

  • If you put it right like that it’s supposed to work $("#prioridade1").on("click", function() {&#xA; $("#prioridade2, #prioridade3").attr("disabled", true);&#xA;}

  • In fact, I followed his example and saw that it works, but as it passes to my code, it continues to mark the others. I should leave it at the head of the page or can I leave it at the end? after all it is only a statement within the <script type="text/javascript></script> right?

  • William the most indicated is to call the javascript before closing the tag body. But jQuery in the first of the other js.

  • yes.. this in this format, but not yet working... I will try to do right by the console and see if it works

Show 2 more comments

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>

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.