DIV only clickable if RADIO is selected

Question

DIV only clickable if RADIO is selected

Navigation

#1 by (3 votes)
#2 by (2 votes)

3

I would like my <button id="bottaaoPA">Comprar</button> to only be clickable if radio was checked.

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><formaction="">
  <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>

html jquery input radiobutton

asked by anonymous 25.01.2016 / 19:55

2 answers

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><formaction="">
  <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>

25.01.2016 / 20:10

Get the $ index of an ng-repeat that contains an ng-controller in $ scope in AngularJS Warning in comparison of floats how to proceed

score 3 · Accepted Answer

It would look like this with 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><formaction="">
    <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 bottaaaoPA must be a button because div has no disabled attribute):

$(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><formaction="">
    <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>