DIV only clickable if RADIO is marked

Asked

Viewed 322 times

3

I wish my <button id="bottaaoPA">Comprar</button> was only clickable if the radio were marked.

Code:

$(function(){

  var contador = 0;

  $('.pa').click(function(){

    if(contador === 0)
    {
      $(this).addClass("select");
      $(this).hasClass("selectB");
      $("#bottaaoPA").css("display","block");
      $("#bottaaoPB").css("display","none");
      $("#bottaaoPC").css("display","none");
      contador = 1;
    }
    else
    {
      $(this).removeClass("select");
      $("#bottaaoPA").css("display","none"); //apenas para teste
      contador = 0;
    }
  });
});
$(function(){
  $("#bottaaoPA").click(function(){
    if($("input[name='bbt']").prop( "checked" ) &&    
       $("input[name='resp'").prop( "checked" ))
    {
      alert("Dois marcados");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="">
  <h3><input type="radio" class="radio" id="radio1" name="bbt" value="bbt">Li e concordo com o <a href="#">Regulamento Geral BBT.</a></h3><br />
  <h3><input type="radio" class="radio" id="radio2" name="resp" value="resp">Li e concordo com o <a href="#">Termo de Isenção de Responsabilidade</a> do evento.</h3>
  <h5><img src="img/setaC-04.png"/><a href="#">Baixe aqui</a> a Ficha de Inscrição/Ficha Médica para a sua inscrição do evento.</h5>
</form>
<button id="bottaaoPA" disabled="disabled">Comprar</button>

jquery html input radiobutton

2 answers

3


I’d be like this with the div:

$(function(){
  $("#bottaaoPA").off("click");
  
  $("#bottaaoPA").click(function(){
    if($("input[name='bbt']").prop( "checked" ) &&    
       $("input[name='resp'").prop( "checked" ))
    {
      alert("Dois marcados");
    }

  });
  $("input[name='bbt']").click(function(){
    verifica();
  });
  $("input[name='resp']").click(function(){
    verifica();
  });
  
  function verifica()
  {
    if($("input[name='bbt']").prop( "checked" ) &&    
       $("input[name='resp'").prop( "checked" ))
    {
      $("#bottaaoPA").on("click");
      return true;
    }
    else
    {
      return false;
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="">
    <h3><input type="radio" name="bbt" value="bbt">Li e concordo com o <a href="#">Regulamento Geral BBT.</a></h3><br />
    <h3><input type="radio" name="resp" value="resp">Li e concordo com o <a href="#">Termo de Isenção de Responsabilidade</a> do evento.</h3>
    <h5><img src="img/setaC-04.png"/><a href="#">Baixe aqui</a> a Ficha de Inscrição/Ficha Médica para a sua inscrição do evento.</h5>
</form>
<div id="bottaaoPA">Comprar</div>

Or it may be (but the bottaaaoPA must be a button because div has no attribute disabled):

$(function(){
  $("input[name='bbt']").change(function(){
    verifica();
  });
  $("input[name='resp']").change(function(){
    verifica();
  });
  $("#bottaaoPA").click(function(){
    alert("teste");
  });
  
  function verifica()
  {
    if($("input[name='bbt']").prop( "checked" ) &&    
       $("input[name='resp'").prop( "checked" ))
    {
      $("#bottaaoPA").prop("disabled", false);
      return true;
    }
    else
    {
      return false;
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="">
    <h3><input type="radio" name="bbt" value="bbt">Li e concordo com o <a href="#">Regulamento Geral BBT.</a></h3><br />
    <h3><input type="radio" name="resp" value="resp">Li e concordo com o <a href="#">Termo de Isenção de Responsabilidade</a> do evento.</h3>
    <h5><img src="img/setaC-04.png"/><a href="#">Baixe aqui</a> a Ficha de Inscrição/Ficha Médica para a sua inscrição do evento.</h5>
</form>
<button id="bottaaoPA" disabled>Comprar</button>

  • Friend was not... still with 1 marked to push the button :/

  • Here works perfectly, press Run code snippet and you will see. for him to do nothing when only one radio is marked just delete the else if and else that he will only do something if they have both marked.

  • @Ivcs I took only left the IF but still it gets clickable

  • To leave clickable or not just using button friend, I put the way using button in the answer.

  • Yes it is already so with disable but if I mark 1 it is already clickable :/

  • Bro you’re doing something wrong so look at the answer in the second Executar trecho de código will only activate the button if both are marked.

  • 1

    I completed the answer using the div, with the function on and off of jquery. Now with div also works, it will only be clickable if both checkbox are checked.

  • Opaaa, now it’s been discovered my mistake thank you :)

Show 3 more comments

2

$(document).ready(function() {
  $(".radio").click(function() {
    if($("#radio1").is(":checked") && $("#radio2").is(":checked")) {
      $("#bottaaoPA").removeAttr("disabled");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="">
  <h3><input type="radio" class="radio" id="radio1" name="bbt" value="bbt">Li e concordo com o <a href="#">Regulamento Geral BBT.</a></h3>
  <br />
  <h3><input type="radio" class="radio" id="radio2" name="resp" value="resp">Li e concordo com o <a href="#">Termo de Isenção de Responsabilidade</a> do evento.</h3>
  <h5><img src="img/setaC-04.png"/><a href="#">Baixe aqui</a> a Ficha de Inscrição/Ficha Médica para a sua inscrição do evento.</h5>
</form>
<button id="bottaaoPA" disabled="disabled">Comprar</button>

  • It gave more or less right. because I need the button to be ON only if the 2 RADIO are selected and not only one!

  • @kaiquemix you did not specify this in your question. But, anyway, I have already edited my answer.

  • it was not, pressing 1 it still gives to tighten

  • @kaiquemix here worked properly. You’re doing something wrong.

  • I’ll update my up there for you to take a look Igor

  • edited, I could take a look

Show 1 more comment

Browser other questions tagged jquery html input radiobutton

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