Hiding and showing tab inside a modal using check

Asked

Viewed 38 times

0

I have a registration screen that’s inside a modal. Within this modal there are some tabs, among them a tab called foreign. I am trying to put a check box so that if the check box is selected the tab appears, if it is not selected the tab disappears.. I couldn’t do it right.

my js

$("#check").click(function(){

  if($(this).val()=="true"){
    $("#tabEstrangeiro").css("visibility","visible");
    $(this).val("true");
  }
  else{
    $("#tabEstrangeiro").css("visibility","hidden");
    $(this).val("false");
  }

});

my html 

<div class="form-group col-md-12">
  <ul class="nav nav-tabs">
    <li><a class="active" data-toggle="tab" data-target="#dados">Dados</a></li>
    <li><a data-toggle="tab" id="tabEstrangeiro"  data-target="#estrangeiro">Estrangeiro</a></li>
    <li><a data-toggle="tab" data-target="#documentos">Documentos</a></li>
    <li><a data-toggle="tab" data-target="#pacientes">Paciente</a></li>
    <li><a data-toggle="tab" data-target="#caracteristicas">Características</a></li>
  </ul>

  <div class="tab-content">
    <div id="dados" class="tab-pane fade in active">
    <br>
    <div class="form-group col-md-4">
            <label>Estrangeiro:</label><br> 
            <label class="checkbox-inline"><input type="checkbox" id="check" ng-model="pessoasCaracteristicas.flagDoador"   value="true">Sim</label>

          </div>    
      <div class="form-group col-md-4">
        <label>CEP:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.cep" />
      </div>

      <div class="form-group col-md-4">  
        <label>País:</label> <select ng-model="pessoasEnderecos.pais.idPais" class="form-control">
          <option value="{{paises.idPais}}" ng-repeat="pais in paises">{{pais.nome}}</option>
        </select>
      </div>
      <div id="outroPais">
        <div class="form-group col-md-4">
          <label>Cidade:</label> <input maxlength="20" required="required" type="text" class="form-control" ng-model="distrito.nome" />
        </div>
      </div>


    <div id="paisBrasil">
      <div class="form-group col-md-4">
        <label>Município:</label> <select ng-model="pessoasEnderecos.municipio.idPais" class="form-control">
          <option value="{{mun.idMunicipio}}" ng-repeat="mun in municipios">{{mun.nome}}</option>
        </select>
      </div>
      <div class="form-group col-md-4">
        <label>Bairro:</label> <select ng-model="pessoasEnderecos.bairrosIdentidade.idBairro" class="form-control">
          <option value="{{bai.idBairro}}" ng-repeat="bai in bairros">{{bai.nome}}</option>
        </select>
      </div>
      <div class="form-group col-md-4">
        <label>Logradouro:</label> <select ng-model="pessoasEnderecos.logradouros.idLogradouro" class="form-control">
          <option value="{{log.idLogradouro}}" ng-repeat="log in logradouros">{{log.nome}}</option>
        </select>
      </div>
      <div class="form-group col-md-2">
        <label>Número:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.numero" />
      </div>

      <div class="form-group col-md-2">
        <label>Bloco:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.bloco" />
      </div>
        <div class="form-group col-md-4">
        <label>Complemento:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.complemento" />
      </div>
      <div class="form-group col-md-12">
      <p><strong>Informações</strong></p>
    </div>
    <br>

    <div class="form-group col-md-4">
      <label>Email:</label> <input maxlength="70" type="email" class="form-control" ng-model="pessoasContatos.contato" />
    </div>
    <div class="form-group col-md-4">
      <label>Telefone:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasContatos.tipoContato.descricao" />
    </div>
    <div class="form-group col-md-4">
        <label>Estado civil:</label> <select ng-model="pessoasFisicas.estadoCivil.idestadoCivil" class="form-control">
          <option value="{{estCiv.idEstadoCivil}}" ng-repeat="estCiv in estadosCivis">{{estCiv.descricao}}</option>
        </select>
      </div>
      <div class="form-group col-md-4">
        <label>Raça Cor:</label> <select ng-model="pessoasFisicas.racaCor.idRacaCor" class="form-control">
          <option value="{{rac.idRacaCor}}" ng-repeat="rac in racaCor">{{rac.nome}}</option>
        </select>
      </div>
    <div class="form-group col-md-4">
      <label>Nome da mãe:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoas.nomeMae" />
    </div>
    <div class="form-group col-md-4">
      <label>Nome do pai:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoas.nomePai" />
    </div>

    <div class="form-group col-md-4">
      <label>Nacionalidade:</label> <select ng-model="pessoasFisicas.nacionalidade.idNacionalidade" class="form-control">
         <option value="{{nac.idNacionalidade}}" ng-repeat="nac in nacionalidades">{{nac.descricao}}</option>
      </select>
    </div>

<!-- falta a tabela escolaridade     -->    
    <div class="form-group col-md-4">
      <label>Grau de escol.:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="distrito.nome" />
    </div>
    <div class="form-group col-md-4">
      <label>Óbito:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.certidaoObito" />
    </div>


    </div>
    </div>
    <div id="documentos" class="tab-pane fade">
    <br>
      <div class="form-group col-md-4">
            <label>CPF:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.cpf" />
          </div>
          <div class="form-group col-md-4">
            <label>RG:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.identidadeRg" />
          </div>
          <div class="form-group col-md-4">
            <label>Orgão Emissor:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.orgaoEmissorRg" />
          </div>
          <div class="form-group col-md-4">
            <label>UF Emissor:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.ufOrgaoEmissor" />
          </div>
          <div class="form-group col-md-4">
            <label>Data emissão:</label> <input maxlength="70" required="required" type="date" class="form-control" ng-model="pessoasFisicas.ufOrgaoEmissor" />
          </div>
          <!--  somente para estrangeiros    -->
          <div class="form-group col-md-4">
            <label>Data validade:</label> <input maxlength="70" required="required" type="date" class="form-control" />
          </div>
          <div class="form-group col-md-4">
            <label>Título:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.tituloEleitor" />
          </div>
          <div class="form-group col-md-4">
            <label>Zona eleitoral:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.zonaEleitoral" />
          </div>
          <div class="form-group col-md-4">
            <label>Seção eleitoral:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.secaoEleitoral" />
          </div>
          <div class="form-group col-md-4">
            <label>Profissão:</label> <input maxlength="70" required="required" type="text" class="form-control" />
          </div>
          <div class="form-group col-md-4">
            <label>Carteira profissional:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.carteiraProfissional" />
          </div>
          <div class="form-group col-md-4">
            <label>Série Carteira prof.:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.serieCarteiraProfissional" />
          </div>
          <div class="form-group col-md-4">
            <label>Emissão Carteira prof.:</label> <input maxlength="70" required="required" type="date" class="form-control"
              ng-model="pessoasFisicas.emissaoCarteiraProfissional" />
          </div>
          <div class="form-group col-md-4">
            <label>PIS/PASEP:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.pispasep" />
          </div>
          <div class="form-group col-md-4">
            <label>Data cadastro PIS/PASEP:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.dataCadastroPisPasep" />
          </div>
          <div class="form-group col-md-4">
            <label>Cart. Reg. Nascimento:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.ufOrgaoEmissor" />
          </div>
          <div class="form-group col-md-4">
            <label>Reservista:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.codigoReservista" />
          </div>


    </div>
    <div id="pacientes" class="tab-pane fade">
      <br>
      <div class="form-group col-md-4">
            <label>Nome do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pacientes.nomeResponsavel" />
          </div>
          <div class="form-group col-md-4">
            <label>CPF do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.cpfResponsavel" />
          </div>
          <div class="form-group col-md-4">
            <label>CNS do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.cnsResponsavel" />
          </div>
          <div class="form-group col-md-4">
            <label>CNS do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.cnsResponsavel" />
          </div>

          <div class="form-group col-md-4">
            <label>Área:</label> <select ng-model="pacientes.area.idArea" class="form-control">
              <option value="{{ar.idArea}}" ng-repeat="ar in areas">{{nac.descricao}}</option>
            </select>
          </div>
          <div class="form-group col-md-4">
            <label>Microarea:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.microarea" />
          </div>
          <div class="form-group col-md-4">
            <label>Família:</label> <select ng-model="pacientes.familia.idFamilia" class="form-control">
              <option value="{{fam.idFamilia}}" ng-repeat="fam in familias">{{fam.nome}}</option>
            </select>
          </div>
          <div class="form-group col-md-8">
            <label>Alérgico:</label> <label class="checkbox-inline"><input type="checkbox" ng-model="pacientes.flagAlergico" value="">Sim</label>
            <textarea class="form-control" ng-model="pacientes.observacoesAlergias" rows="3" id="obsAlergico"></textarea>

          </div>

    </div>
    <div id="caracteristicas" class="tab-pane fade">
    <br>
      <div class="form-group col-md-4">
            <label>Profissão:</label> <select ng-model="pessoasCaracteristicas.cbor.idCbor" class="form-control">
              <option value="{{cb.idCbor}}" ng-repeat="cb in cbors">{{cb.nome}}</option>
            </select>
          </div>
          <div class="form-group col-md-4">
            <label>Estatura:</label> <input maxlength="5" required="required" type="number" class="form-control" ng-model="pessoasCaracteristicas.estatura" />
          </div>
          <div class="form-group col-md-4">
            <label>Peso:</label> <input maxlength="5" required="required" type="number" class="form-control" ng-model="pessoasCaracteristicas.peso" />
          </div>
          <div class="form-group col-md-4">
            <label>Família:</label> <select ng-model="pessoasCaracteristicas.corOlhos.idCor" class="form-control">
              <option value="{{cor.idCor}}" ng-repeat="cor in coresOlhos">{{cor.descricao}}</option>
            </select>
          </div>
          <!-- ??????/ -->
          <div class="form-group col-md-4">
            <label>Tipo sanguíneo:</label> <select ng-model="pessoasCaracteristicas.tipoSanguineo.idtipoSanguineo" class="form-control">
              <option value="{{cor.idCor}}" ng-repeat="cor in coresOlhos">{{cor.descricao}}</option>
            </select>
          </div>

          <div class="form-group col-md-4">
            <label>Orientação sexual:</label> <select ng-model="pessoasCaracteristicas.orientacao.idOrientacao" class="form-control">
              <option value="{{or.idOrientacao}}" ng-repeat="or in orientacoesSexuais">{{or.descricao}}</option>
            </select>
          </div>
          <div class="form-group col-md-4">
            <label>Identidade de gênero:</label> <select ng-model="pessoasCaracteristicas.identidadeGenero.idIdentidade" class="form-control">
              <option value="{gener.idIdentidade}}" ng-repeat="gener in identidadesGenero">{{gener.descricao}}</option>
            </select>
          </div>
          <div class="form-group col-md-2">
            <label>Deficiente:</label> <br> <label class="checkbox-inline"><input type="checkbox"
              ng-model="pessoasCaracteristicas.flagDeficiente" value="">Sim</label>
          </div>    
          <div class="form-group col-md-2">
            <label>Doador:</label><br> <label class="checkbox-inline"><input type="checkbox" ng-model="pessoasCaracteristicas.flagDoador"
              value="">Sim</label>
          </div>                            
    </div>

  <div id="estrangeiro" class="tab-pane fade">
    <br>                                            
          <div class="form-group col-md-4">
            <label>Ano de chegada:</label> <input maxlength="5" required="required" type="date" class="form-control" ng-model="pessoasCaracteristicas.estatura" />
          </div>
          <div class="form-group col-md-4">
            <label>Tipo de visto:</label> <input maxlength="5" required="required" type="text" class="form-control" ng-model="pessoasCaracteristicas.peso" />
          </div>                                                    
    </div>
javascript checkbox

2 answers

1


You can use the .is(':checked')and can also use .hide() and .show() to hide or show the widget.

Updating:

For the "Alien" tab to come hidden, or you hide it with display: none or you can use a trigger as I put down:

<script>
$("#check").click(function(){

    if($(this).is(':checked')){
    $("#tabEstrangeiro").show();
    $(this).val("true");
  }
  else{
    $("#tabEstrangeiro").hide();
    $(this).val("false");
  }

});

$("#check").trigger('click');
</script>

Testing:

$("#check").click(function(){

    if($(this).is(':checked')){
    $("#tabEstrangeiro").show();
    $(this).val("true");
  }
  else{
    $("#tabEstrangeiro").hide();
    $(this).val("false");
  }

});

$("#check").trigger('click');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

<div class="form-group col-md-12">
  <ul class="nav nav-tabs">
    <li><a class="active" data-toggle="tab" data-target="#dados">Dados</a></li>
    <li><a data-toggle="tab" id="tabEstrangeiro"  data-target="#estrangeiro">Estrangeiro</a></li>
    <li><a data-toggle="tab" data-target="#documentos">Documentos</a></li>
    <li><a data-toggle="tab" data-target="#pacientes">Paciente</a></li>
    <li><a data-toggle="tab" data-target="#caracteristicas">Características</a></li>
  </ul>

  <div class="tab-content">
    <div id="dados" class="tab-pane fade in active">
    <br>
    <div class="form-group col-md-4">
            <label>Estrangeiro:</label><br> 
            <label class="checkbox-inline"><input type="checkbox" id="check" checked="checked" ng-model="pessoasCaracteristicas.flagDoador" value="true">Sim</label>

          </div>    
      <div class="form-group col-md-4">
        <label>CEP:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.cep" />
      </div>

      <div class="form-group col-md-4">  
        <label>País:</label> <select ng-model="pessoasEnderecos.pais.idPais" class="form-control">
          <option value="{{paises.idPais}}" ng-repeat="pais in paises">{{pais.nome}}</option>
        </select>
      </div>
      <div id="outroPais">
        <div class="form-group col-md-4">
          <label>Cidade:</label> <input maxlength="20" required="required" type="text" class="form-control" ng-model="distrito.nome" />
        </div>
      </div>


    <div id="paisBrasil">
      <div class="form-group col-md-4">
        <label>Município:</label> <select ng-model="pessoasEnderecos.municipio.idPais" class="form-control">
          <option value="{{mun.idMunicipio}}" ng-repeat="mun in municipios">{{mun.nome}}</option>
        </select>
      </div>
      <div class="form-group col-md-4">
        <label>Bairro:</label> <select ng-model="pessoasEnderecos.bairrosIdentidade.idBairro" class="form-control">
          <option value="{{bai.idBairro}}" ng-repeat="bai in bairros">{{bai.nome}}</option>
        </select>
      </div>
      <div class="form-group col-md-4">
        <label>Logradouro:</label> <select ng-model="pessoasEnderecos.logradouros.idLogradouro" class="form-control">
          <option value="{{log.idLogradouro}}" ng-repeat="log in logradouros">{{log.nome}}</option>
        </select>
      </div>
      <div class="form-group col-md-2">
        <label>Número:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.numero" />
      </div>

      <div class="form-group col-md-2">
        <label>Bloco:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.bloco" />
      </div>
        <div class="form-group col-md-4">
        <label>Complemento:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.complemento" />
      </div>
      <div class="form-group col-md-12">
      <p><strong>Informações</strong></p>
    </div>
    <br>

    <div class="form-group col-md-4">
      <label>Email:</label> <input maxlength="70" type="email" class="form-control" ng-model="pessoasContatos.contato" />
    </div>
    <div class="form-group col-md-4">
      <label>Telefone:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasContatos.tipoContato.descricao" />
    </div>
    <div class="form-group col-md-4">
        <label>Estado civil:</label> <select ng-model="pessoasFisicas.estadoCivil.idestadoCivil" class="form-control">
          <option value="{{estCiv.idEstadoCivil}}" ng-repeat="estCiv in estadosCivis">{{estCiv.descricao}}</option>
        </select>
      </div>
      <div class="form-group col-md-4">
        <label>Raça Cor:</label> <select ng-model="pessoasFisicas.racaCor.idRacaCor" class="form-control">
          <option value="{{rac.idRacaCor}}" ng-repeat="rac in racaCor">{{rac.nome}}</option>

        </select>
      </div>
    <div class="form-group col-md-4">
      <label>Nome da mãe:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoas.nomeMae" />
    </div>
    <div class="form-group col-md-4">
      <label>Nome do pai:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoas.nomePai" />
    </div>

    <div class="form-group col-md-4">
      <label>Nacionalidade:</label> <select ng-model="pessoasFisicas.nacionalidade.idNacionalidade" class="form-control">
         <option value="{{nac.idNacionalidade}}" ng-repeat="nac in nacionalidades">{{nac.descricao}}</option>
      </select>
    </div>

<!-- falta a tabela escolaridade     -->    
    <div class="form-group col-md-4">
      <label>Grau de escol.:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="distrito.nome" />
    </div>
    <div class="form-group col-md-4">
      <label>Óbito:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.certidaoObito" />
    </div>


    </div>
    </div>
    <div id="documentos" class="tab-pane fade">
    <br>
      <div class="form-group col-md-4">
            <label>CPF:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.cpf" />
          </div>
          <div class="form-group col-md-4">
            <label>RG:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.identidadeRg" />
          </div>
          <div class="form-group col-md-4">
            <label>Orgão Emissor:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.orgaoEmissorRg" />
          </div>
          <div class="form-group col-md-4">
            <label>UF Emissor:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.ufOrgaoEmissor" />
          </div>
          <div class="form-group col-md-4">
            <label>Data emissão:</label> <input maxlength="70" required="required" type="date" class="form-control" ng-model="pessoasFisicas.ufOrgaoEmissor" />
          </div>
          <!--  somente para estrangeiros    -->
          <div class="form-group col-md-4">
            <label>Data validade:</label> <input maxlength="70" required="required" type="date" class="form-control" />
          </div>
          <div class="form-group col-md-4">
            <label>Título:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.tituloEleitor" />
          </div>
          <div class="form-group col-md-4">
            <label>Zona eleitoral:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.zonaEleitoral" />
          </div>
          <div class="form-group col-md-4">
            <label>Seção eleitoral:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.secaoEleitoral" />
          </div>
          <div class="form-group col-md-4">
            <label>Profissão:</label> <input maxlength="70" required="required" type="text" class="form-control" />
          </div>
          <div class="form-group col-md-4">
            <label>Carteira profissional:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.carteiraProfissional" />
          </div>
          <div class="form-group col-md-4">
            <label>Série Carteira prof.:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.serieCarteiraProfissional" />
          </div>
          <div class="form-group col-md-4">
            <label>Emissão Carteira prof.:</label> <input maxlength="70" required="required" type="date" class="form-control"
              ng-model="pessoasFisicas.emissaoCarteiraProfissional" />
          </div>
          <div class="form-group col-md-4">
            <label>PIS/PASEP:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.pispasep" />
          </div>
          <div class="form-group col-md-4">
            <label>Data cadastro PIS/PASEP:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.dataCadastroPisPasep" />
          </div>
          <div class="form-group col-md-4">
            <label>Cart. Reg. Nascimento:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.ufOrgaoEmissor" />
          </div>
          <div class="form-group col-md-4">
            <label>Reservista:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.codigoReservista" />
          </div>


    </div>
    <div id="pacientes" class="tab-pane fade">
      <br>
      <div class="form-group col-md-4">
            <label>Nome do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pacientes.nomeResponsavel" />
          </div>
          <div class="form-group col-md-4">
            <label>CPF do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.cpfResponsavel" />
          </div>
          <div class="form-group col-md-4">
            <label>CNS do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.cnsResponsavel" />
          </div>
          <div class="form-group col-md-4">
            <label>CNS do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.cnsResponsavel" />
          </div>

          <div class="form-group col-md-4">
            <label>Área:</label> <select ng-model="pacientes.area.idArea" class="form-control">
              <option value="{{ar.idArea}}" ng-repeat="ar in areas">{{nac.descricao}}</option>
            </select>
          </div>
          <div class="form-group col-md-4">
            <label>Microarea:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.microarea" />
          </div>
          <div class="form-group col-md-4">
            <label>Família:</label> <select ng-model="pacientes.familia.idFamilia" class="form-control">
              <option value="{{fam.idFamilia}}" ng-repeat="fam in familias">{{fam.nome}}</option>
            </select>
          </div>
          <div class="form-group col-md-8">
            <label>Alérgico:</label> <label class="checkbox-inline"><input type="checkbox" ng-model="pacientes.flagAlergico" value="">Sim</label>
            <textarea class="form-control" ng-model="pacientes.observacoesAlergias" rows="3" id="obsAlergico"></textarea>

          </div>

    </div>
    <div id="caracteristicas" class="tab-pane fade">
    <br>
      <div class="form-group col-md-4">
            <label>Profissão:</label> <select ng-model="pessoasCaracteristicas.cbor.idCbor" class="form-control">
              <option value="{{cb.idCbor}}" ng-repeat="cb in cbors">{{cb.nome}}</option>
            </select>
          </div>
          <div class="form-group col-md-4">
            <label>Estatura:</label> <input maxlength="5" required="required" type="number" class="form-control" ng-model="pessoasCaracteristicas.estatura" />
          </div>
          <div class="form-group col-md-4">
            <label>Peso:</label> <input maxlength="5" required="required" type="number" class="form-control" ng-model="pessoasCaracteristicas.peso" />
          </div>
          <div class="form-group col-md-4">
            <label>Família:</label> <select ng-model="pessoasCaracteristicas.corOlhos.idCor" class="form-control">
              <option value="{{cor.idCor}}" ng-repeat="cor in coresOlhos">{{cor.descricao}}</option>
            </select>
          </div>
          <!-- ??????/ -->
          <div class="form-group col-md-4">
            <label>Tipo sanguíneo:</label> <select ng-model="pessoasCaracteristicas.tipoSanguineo.idtipoSanguineo" class="form-control">
              <option value="{{cor.idCor}}" ng-repeat="cor in coresOlhos">{{cor.descricao}}</option>
            </select>
          </div>

          <div class="form-group col-md-4">
            <label>Orientação sexual:</label> <select ng-model="pessoasCaracteristicas.orientacao.idOrientacao" class="form-control">
              <option value="{{or.idOrientacao}}" ng-repeat="or in orientacoesSexuais">{{or.descricao}}</option>
            </select>
          </div>
          <div class="form-group col-md-4">
            <label>Identidade de gênero:</label> <select ng-model="pessoasCaracteristicas.identidadeGenero.idIdentidade" class="form-control">
              <option value="{gener.idIdentidade}}" ng-repeat="gener in identidadesGenero">{{gener.descricao}}</option>
            </select>
          </div>
          <div class="form-group col-md-2">
            <label>Deficiente:</label> <br> <label class="checkbox-inline"><input type="checkbox"
              ng-model="pessoasCaracteristicas.flagDeficiente" value="">Sim</label>
          </div>    
          <div class="form-group col-md-2">
            <label>Doador:</label><br> <label class="checkbox-inline"><input type="checkbox" ng-model="pessoasCaracteristicas.flagDoador"
              value="">Sim</label>
          </div>                            
    </div>

  <div id="estrangeiro" class="tab-pane fade">
    <br>                                            
          <div class="form-group col-md-4">
            <label>Ano de chegada:</label> <input maxlength="5" required="required" type="date" class="form-control" ng-model="pessoasCaracteristicas.estatura" />
          </div>
          <div class="form-group col-md-4">
            <label>Tipo de visto:</label> <input maxlength="5" required="required" type="text" class="form-control" ng-model="pessoasCaracteristicas.peso" />
          </div>                                                    
    </div>

  • It worked but when the modal appears comes with the foreign guide appearing and the check cleared... the ideal would be to come unchecked and the hidden foreign tab..

  • @Eduardokrakhecke response edited. :)

0

Try it like this:

$("#check").click(function(){

  if($(this).is(':checked')){
    $("#tabEstrangeiro").css("visibility","visible");
    $(this).val("true");
  }
  else{
    $("#tabEstrangeiro").css("visibility","hidden");
    $(this).val("false");
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

<div class="form-group col-md-12">
  <ul class="nav nav-tabs">
    <li><a class="active" data-toggle="tab" data-target="#dados">Dados</a></li>
    <li><a data-toggle="tab" id="tabEstrangeiro"  data-target="#estrangeiro">Estrangeiro</a></li>
    <li><a data-toggle="tab" data-target="#documentos">Documentos</a></li>
    <li><a data-toggle="tab" data-target="#pacientes">Paciente</a></li>
    <li><a data-toggle="tab" data-target="#caracteristicas">Características</a></li>
  </ul>

  <div class="tab-content">
    <div id="dados" class="tab-pane fade in active">
    <br>
    <div class="form-group col-md-4">
            <label>Estrangeiro:</label><br> 
            <label class="checkbox-inline"><input type="checkbox" id="check" ng-model="pessoasCaracteristicas.flagDoador"   value="true">Sim</label>

          </div>    
      <div class="form-group col-md-4">
        <label>CEP:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.cep" />
      </div>

      <div class="form-group col-md-4">  
        <label>País:</label> <select ng-model="pessoasEnderecos.pais.idPais" class="form-control">
          <option value="{{paises.idPais}}" ng-repeat="pais in paises">{{pais.nome}}</option>
        </select>
      </div>
      <div id="outroPais">
        <div class="form-group col-md-4">
          <label>Cidade:</label> <input maxlength="20" required="required" type="text" class="form-control" ng-model="distrito.nome" />
        </div>
      </div>


    <div id="paisBrasil">
      <div class="form-group col-md-4">
        <label>Município:</label> <select ng-model="pessoasEnderecos.municipio.idPais" class="form-control">
          <option value="{{mun.idMunicipio}}" ng-repeat="mun in municipios">{{mun.nome}}</option>
        </select>
      </div>
      <div class="form-group col-md-4">
        <label>Bairro:</label> <select ng-model="pessoasEnderecos.bairrosIdentidade.idBairro" class="form-control">
          <option value="{{bai.idBairro}}" ng-repeat="bai in bairros">{{bai.nome}}</option>
        </select>
      </div>
      <div class="form-group col-md-4">
        <label>Logradouro:</label> <select ng-model="pessoasEnderecos.logradouros.idLogradouro" class="form-control">
          <option value="{{log.idLogradouro}}" ng-repeat="log in logradouros">{{log.nome}}</option>
        </select>
      </div>
      <div class="form-group col-md-2">
        <label>Número:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.numero" />
      </div>

      <div class="form-group col-md-2">
        <label>Bloco:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.bloco" />
      </div>
        <div class="form-group col-md-4">
        <label>Complemento:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasEnderecos.complemento" />
      </div>
      <div class="form-group col-md-12">
      <p><strong>Informações</strong></p>
    </div>
    <br>

    <div class="form-group col-md-4">
      <label>Email:</label> <input maxlength="70" type="email" class="form-control" ng-model="pessoasContatos.contato" />
    </div>
    <div class="form-group col-md-4">
      <label>Telefone:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasContatos.tipoContato.descricao" />
    </div>
    <div class="form-group col-md-4">
        <label>Estado civil:</label> <select ng-model="pessoasFisicas.estadoCivil.idestadoCivil" class="form-control">
          <option value="{{estCiv.idEstadoCivil}}" ng-repeat="estCiv in estadosCivis">{{estCiv.descricao}}</option>
        </select>
      </div>
      <div class="form-group col-md-4">
        <label>Raça Cor:</label> <select ng-model="pessoasFisicas.racaCor.idRacaCor" class="form-control">
          <option value="{{rac.idRacaCor}}" ng-repeat="rac in racaCor">{{rac.nome}}</option>
        </select>
      </div>
    <div class="form-group col-md-4">
      <label>Nome da mãe:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoas.nomeMae" />
    </div>
    <div class="form-group col-md-4">
      <label>Nome do pai:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoas.nomePai" />
    </div>

    <div class="form-group col-md-4">
      <label>Nacionalidade:</label> <select ng-model="pessoasFisicas.nacionalidade.idNacionalidade" class="form-control">
         <option value="{{nac.idNacionalidade}}" ng-repeat="nac in nacionalidades">{{nac.descricao}}</option>
      </select>
    </div>

<!-- falta a tabela escolaridade     -->    
    <div class="form-group col-md-4">
      <label>Grau de escol.:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="distrito.nome" />
    </div>
    <div class="form-group col-md-4">
      <label>Óbito:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.certidaoObito" />
    </div>


    </div>
    </div>
    <div id="documentos" class="tab-pane fade">
    <br>
      <div class="form-group col-md-4">
            <label>CPF:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.cpf" />
          </div>
          <div class="form-group col-md-4">
            <label>RG:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.identidadeRg" />
          </div>
          <div class="form-group col-md-4">
            <label>Orgão Emissor:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.orgaoEmissorRg" />
          </div>
          <div class="form-group col-md-4">
            <label>UF Emissor:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.ufOrgaoEmissor" />
          </div>
          <div class="form-group col-md-4">
            <label>Data emissão:</label> <input maxlength="70" required="required" type="date" class="form-control" ng-model="pessoasFisicas.ufOrgaoEmissor" />
          </div>
          <!--  somente para estrangeiros    -->
          <div class="form-group col-md-4">
            <label>Data validade:</label> <input maxlength="70" required="required" type="date" class="form-control" />
          </div>
          <div class="form-group col-md-4">
            <label>Título:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.tituloEleitor" />
          </div>
          <div class="form-group col-md-4">
            <label>Zona eleitoral:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.zonaEleitoral" />
          </div>
          <div class="form-group col-md-4">
            <label>Seção eleitoral:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.secaoEleitoral" />
          </div>
          <div class="form-group col-md-4">
            <label>Profissão:</label> <input maxlength="70" required="required" type="text" class="form-control" />
          </div>
          <div class="form-group col-md-4">
            <label>Carteira profissional:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.carteiraProfissional" />
          </div>
          <div class="form-group col-md-4">
            <label>Série Carteira prof.:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.serieCarteiraProfissional" />
          </div>
          <div class="form-group col-md-4">
            <label>Emissão Carteira prof.:</label> <input maxlength="70" required="required" type="date" class="form-control"
              ng-model="pessoasFisicas.emissaoCarteiraProfissional" />
          </div>
          <div class="form-group col-md-4">
            <label>PIS/PASEP:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.pispasep" />
          </div>
          <div class="form-group col-md-4">
            <label>Data cadastro PIS/PASEP:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.dataCadastroPisPasep" />
          </div>
          <div class="form-group col-md-4">
            <label>Cart. Reg. Nascimento:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pessoasFisicas.ufOrgaoEmissor" />
          </div>
          <div class="form-group col-md-4">
            <label>Reservista:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pessoasFisicas.codigoReservista" />
          </div>


    </div>
    <div id="pacientes" class="tab-pane fade">
      <br>
      <div class="form-group col-md-4">
            <label>Nome do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control"
              ng-model="pacientes.nomeResponsavel" />
          </div>
          <div class="form-group col-md-4">
            <label>CPF do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.cpfResponsavel" />
          </div>
          <div class="form-group col-md-4">
            <label>CNS do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.cnsResponsavel" />
          </div>
          <div class="form-group col-md-4">
            <label>CNS do responsável:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.cnsResponsavel" />
          </div>

          <div class="form-group col-md-4">
            <label>Área:</label> <select ng-model="pacientes.area.idArea" class="form-control">
              <option value="{{ar.idArea}}" ng-repeat="ar in areas">{{nac.descricao}}</option>
            </select>
          </div>
          <div class="form-group col-md-4">
            <label>Microarea:</label> <input maxlength="70" required="required" type="text" class="form-control" ng-model="pacientes.microarea" />
          </div>
          <div class="form-group col-md-4">
            <label>Família:</label> <select ng-model="pacientes.familia.idFamilia" class="form-control">
              <option value="{{fam.idFamilia}}" ng-repeat="fam in familias">{{fam.nome}}</option>
            </select>
          </div>
          <div class="form-group col-md-8">
            <label>Alérgico:</label> <label class="checkbox-inline"><input type="checkbox" ng-model="pacientes.flagAlergico" value="">Sim</label>
            <textarea class="form-control" ng-model="pacientes.observacoesAlergias" rows="3" id="obsAlergico"></textarea>

          </div>

    </div>
    <div id="caracteristicas" class="tab-pane fade">
    <br>
      <div class="form-group col-md-4">
            <label>Profissão:</label> <select ng-model="pessoasCaracteristicas.cbor.idCbor" class="form-control">
              <option value="{{cb.idCbor}}" ng-repeat="cb in cbors">{{cb.nome}}</option>
            </select>
          </div>
          <div class="form-group col-md-4">
            <label>Estatura:</label> <input maxlength="5" required="required" type="number" class="form-control" ng-model="pessoasCaracteristicas.estatura" />
          </div>
          <div class="form-group col-md-4">
            <label>Peso:</label> <input maxlength="5" required="required" type="number" class="form-control" ng-model="pessoasCaracteristicas.peso" />
          </div>
          <div class="form-group col-md-4">
            <label>Família:</label> <select ng-model="pessoasCaracteristicas.corOlhos.idCor" class="form-control">
              <option value="{{cor.idCor}}" ng-repeat="cor in coresOlhos">{{cor.descricao}}</option>
            </select>
          </div>
          <!-- ??????/ -->
          <div class="form-group col-md-4">
            <label>Tipo sanguíneo:</label> <select ng-model="pessoasCaracteristicas.tipoSanguineo.idtipoSanguineo" class="form-control">
              <option value="{{cor.idCor}}" ng-repeat="cor in coresOlhos">{{cor.descricao}}</option>
            </select>
          </div>

          <div class="form-group col-md-4">
            <label>Orientação sexual:</label> <select ng-model="pessoasCaracteristicas.orientacao.idOrientacao" class="form-control">
              <option value="{{or.idOrientacao}}" ng-repeat="or in orientacoesSexuais">{{or.descricao}}</option>
            </select>
          </div>
          <div class="form-group col-md-4">
            <label>Identidade de gênero:</label> <select ng-model="pessoasCaracteristicas.identidadeGenero.idIdentidade" class="form-control">
              <option value="{gener.idIdentidade}}" ng-repeat="gener in identidadesGenero">{{gener.descricao}}</option>
            </select>
          </div>
          <div class="form-group col-md-2">
            <label>Deficiente:</label> <br> <label class="checkbox-inline"><input type="checkbox"
              ng-model="pessoasCaracteristicas.flagDeficiente" value="">Sim</label>
          </div>    
          <div class="form-group col-md-2">
            <label>Doador:</label><br> <label class="checkbox-inline"><input type="checkbox" ng-model="pessoasCaracteristicas.flagDoador"
              value="">Sim</label>
          </div>                            
    </div>

  <div id="estrangeiro" class="tab-pane fade">
    <br>                                            
          <div class="form-group col-md-4">
            <label>Ano de chegada:</label> <input maxlength="5" required="required" type="date" class="form-control" ng-model="pessoasCaracteristicas.estatura" />
          </div>
          <div class="form-group col-md-4">
            <label>Tipo de visto:</label> <input maxlength="5" required="required" type="text" class="form-control" ng-model="pessoasCaracteristicas.peso" />
          </div>                                                    
    </div>

I just made a modification to your code: 

if($(this).is(':checked'))

That way he will check whether the checkbox is checked or not and will display or hide the 'foreign tab'.

Browser other questions tagged javascript checkbox

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