1

Pretendo ao seleccionar a checkbox tornar um select visible.

Código:

$("#check").click(function() {
    if ($(this).val() == "Sim") {
        $("#Acompnhante").css("visibility", "visible");
        $(this).val("false");
    } else {
        $("#Acompnhante").css("visibility", "hidden");
        $(this).val("Sim");
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">  
    <label for="IniciarTarefa">Tarefa a Par</label>
    <input type="checkbox" name="check" id="check" value="Sim"/> 
    <div class="form-group input-group input-group-lg">
        <span class="input-group-addon">
            <span class="fa fa-universal-access"></span>
        </span>
        <select class="form-control" name="Acompnhante" id="Acompnhante" required="" placeholder="Acesso">
            <option></option>
            <option value="1">Sim</option>
        </select>
    </div>
</div>

Está acontecer, mas só depois de seleccionar a checkbox e voltar a retirar a selecção e pretendo que logo ao entrar na página o select apareça escondido e só no caso de seleccionar a checkbox tornar visible o select.

1 Resposta 1

5

O que tu queres é que o select esteja escondido por defeito (ao carregar), e essa ação só vai acontecer no click consoante o teu código.

Podes fazer isto de duas maneiras:

CSS:

select[name="Acompnhante"] {
  visibility: hidden;
}

Em baixo a demonstração:

$("#check").click(function(){
    if($(this).val()=="Sim"){
        $("#Acompnhante").css("visibility","visible");
        $(this).val("false");
    }
    else{
        $("#Acompnhante").css("visibility","hidden");
       $(this).val("Sim");
    }
});
select[name="Acompnhante"] {
  visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">  
<label for="IniciarTarefa">Tarefa a Par</label>
<input type="checkbox" name="check" id="check" value="Sim"/> 
<div class="form-group input-group input-group-lg">
    <span class="input-group-addon">
    <span class="fa fa-universal-access"></span>
    </span>
    <select class="form-control" name="Acompnhante" id="Acompnhante" required="" placeholder="Acesso">
	  <option></option>
      <option value="1">Sim</option>
    </select>
  </div>
</div>

Ou js, acrescentando esta linha antes da tua lógica:

$("#Acompnhante").css("visibility","hidden"); // <-- acrescento desta linha
$("#check").click(function(){
    if($(this).val()=="Sim"){
        $("#Acompnhante").css("visibility","visible");
        $(this).val("false");
    }
    else{
        $("#Acompnhante").css("visibility","hidden");
       $(this).val("Sim");
    }
});

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 .