2

Tenho uma opção de checkbox que ao ser ativa, mostra um segundo check. Preciso garantir que o segundo checkbox só esteja ativo se o primeiro estiver. Minha função mostra e esconde o segundo check de acordo com o valor do primeiro, mas eu preciso que ela também desmarque o segundo quando o primeiro for desmarcado e isso não tá funcionando. Podem me ajudar ? Segue meu código.

$("#ck1").click(function() {
  if ($("#ck1").is(':checked')) {
    $("#ck2").show();
  } else {
    if ($("#ck2").is(':checked')) {
      $("#ck2").prop('checked', false);
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="ck1" name="ck1" />
  <label for="ck1">Check 1</label>
</div>

<div style="display: none;">
  <input type="checkbox" id="ck2" name="ck2" />
  <label for="ck2">Check 2</label>
</div>

3 Respostas 3

1

Para esconder o segundo checkbox, você precisa esconder a div em que ele está:

$("#ck1").on("change",function(){
    if( $(this).is(':checked') )
        $("#ck2").prop('checked',true).parent().show();
    else {
        $("#ck2").prop('checked',false).parent().hide();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="ck1" name="ck1" />
  <label for="ck1">Check 1</label>
</div>

<div style="display: none;">
  <input type="checkbox" id="ck2" name="ck2" />
  <label for="ck2">Check 2</label>
</div>

5
  • Obrigada pela reposta. Esconder o segundo checkbox funciona, apenas desmarcá-lo com o prop que não acontece. Commented 25/10/2017 às 19:02
  • @goldenleticia Curiosamente só não funciona aqui. Aqui no meu PC funciona normal e no JSFiddle também: jsfiddle.net/vw3yqLh6
    – Sam
    Commented 25/10/2017 às 19:10
  • @goldenleticia Deve ser algum bug no snippet do Stack.
    – Sam
    Commented 25/10/2017 às 19:11
  • mas no jsfiddle não está prop, está attr Commented 25/10/2017 às 19:14
  • @goldenleticia desculpe, esqueci de alterar: jsfiddle.net/vw3yqLh6/1
    – Sam
    Commented 25/10/2017 às 19:15
0

Suas condicoes estao erradas, pode ser algo como:

$("#ck1").change(function(){ // pega o evento de mudanca
    if( $(this).is(':checked') ) // verifica se checkbox 1 esta marcado
        $("#ck2").show();
    else { // senao esconde e desmarca checkbox 2
        $("#ck2").prop('checked', false);
        $("#ck2").hide();
    }
}); 
3
  • 1
    Obrigada pela ajuda, mas não fui eu que negativei sua resposta, ainda estou testando as soluções que me passaram. Commented 25/10/2017 às 18:50
  • Mudei o evento da função mas mesmo assim o prop não funciona... Commented 25/10/2017 às 19:01
  • Tem o evento e o else @goldenleticia
    – BrTkCa
    Commented 25/10/2017 às 19:02
0

Tem muitas maneiras de trabalhar com jquery fiz com classe diretamente no elemento, trabalhando na div você acabar esquecendo que o elemento ainda está setado, mas só não esquecer deste detalhe no momento da programação que tudo irá funcionar normalmente.

$("#ck1").change(function(){
    if( $(this).is(':checked') ){
        $(".label-to").show();
        $("#ck2").prop('checked', false).show();
    }else {
    $(".label-to").hide();
        $("#ck2").prop('checked', false).hide();        
    }
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" id="ck1" name="ck1" />
  <label for="ck1">Check 1</label>
</div>

<div >
  <input style="display: none;" class="label-to" type="checkbox" id="ck2" name="ck2" />
  <label style="display: none;" class="label-to" for="ck2">Check 2</label>
</div>

3
  • Minha resposta foi negativada, queria que me explicasse o motivo, caso tenha cometido algo errado na resposta, tento ajusta-la e aprender com isto, por isso estou começando a participar mais ativamente, aprendendo e tentando ensinar.
    – WMomesso
    Commented 25/10/2017 às 18:40
  • Obrigada pela ajuda, mas não fui eu que negativei sua resposta, ainda estou testando as soluções que me passaram. Commented 25/10/2017 às 18:50
  • @goldenleticia questionei no geral para que a pessoa que negativou possa inserir um comentário assim posso corrigir o que está errado.
    – WMomesso
    Commented 25/10/2017 às 18:53

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 .