0

Tenho um código html com java script que mostra e esconde os campos. Gostaria de saber como desabilito a div que estiver oculta no momento ? E também se notarem o código o botão cpf já aparece selecionado, gostaria de fazer ele ficar azul (selecionado somente após o click).

Segue meu código abaixo:

$('#radioBtn a').on('click', function() {
  var sel = $(this).data('title');
  var tog = $(this).data('toggle');
  $('#' + tog).prop('value', sel);

  $('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]').removeClass('active').addClass('notActive');
  $('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeClass('notActive').addClass('active');
})

jQuery(document).ready(function() {
  $(".oculto").hide();
  $(".inf").click(function() {
    var nodo = $(this).attr("href");

    if ($(nodo).is(":visible")) {
      //$(nodo).hide();
      return false;
    } else {
      $(".oculto").hide("slow");
      $(nodo).fadeToggle("fast");
      return false;
    }
  });
});
#radioBtn .notActive {
  color: #3276b1;
  background-color: #fff;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!--TIPO DE CLIENTE-->
<h4><b>Tipo de Cliente:<h4>
   <div class="row">
      <div class="col-md-4" >
         <div class="input-group">
            <div id="radioBtn" class="btn-group">
               <a class="btn btn-primary btn-sm active inf" href="#info1" data-toggle="happy" data-title="cpf">CPF</a>
               <a class="btn btn-primary btn-sm notActive inf" href="#info2" data-toggle="happy" data-title="cnpj">CNPJ</a>
            </div>
         </div>
      </div>
   </div>
<!--FIM TIPO DE CLIENTE-->

<!-- COLUNA CPF-->
<div class="row oculto" id="info1">					
   <!--Campo Nome-->
   <div class="col-md-4 col-xs-4">
      <div class="form-group">
         <label for="nome">Nome:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-nome"></span>
            </div>
            <input type='text' name='nome' id="id_nome" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo Nome-->
						
   <!--Campo CPF-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="cpf">CPF:</label>
         <div class="input-group">
            <div class="input-group-addon">
            <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
            </div>
            <input type='text' name='cpf' id="id_cpf" class="form-control" maxlength='30' required autofocus placeholder='Apenas Números' onkeyup="limite_cpf(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo CPF-->
						
</div>
<!--FIM COLUNA CPF-->	
					
<!-- COLUNA CNPJ-->
<div class="row oculto" id="info2">					
   <!--Campo RAZAO_SOCIAL-->
   <div class="col-md-4 col-xs-4">
      <div class="form-group">
         <label for="razao_social">Razão Social:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-razao_social"></span>
            </div>
            <input type='text' name='razao_social' id="id_razao_social" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo RAZAO_SOCIAL-->
						
   <!--Campo NOME_FANTASIA-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="razao_social">Nome Fantasia:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-user" id="basic-addon-nome_fantasia"></span>
            </div>
            <input type='text' name='razao_social' id="id_razao_social" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo NOME_FANTASIA-->
						 
   <!--Campo CNPJ-->
   <div class="col-md-3 col-xs-4">
      <div class="form-group">
         <label for="razao_social">CNPJ:</label>
         <div class="input-group">
            <div class="input-group-addon">
               <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
            </div>
            <input type='text' name='cnpj' id="id_cnpj" class="form-control" maxlength='30' required autofocus placeholder='Apenas Números' onkeyup="limite_cnpj(this)"><br>
         </div>
      </div>
   </div>
   <!--Fim Campo CNPJ-->
						
</div>
<!--FIM COLUNA CNPJ-->

1
  • 1
    O que você quer dizer com desabilitar a div que estiver oculta?
    – Onaiggac
    15/03/2019 às 19:07

2 Respostas 2

1

O problema no seu script é que parte dele é executado antes do DOM carregar e por isso o efeito que gostaria de dar ao botão não ocorre. Para corrigir basta colocá-lo dentro de $(document).ready(function(){...}). Ficando assim:

    $(document).ready(function () {
        $(".oculto").hide();
        $(".inf").click(function () {
            var nodo = $(this).attr("href");

            if ($(nodo).is(":visible")) {
                //$(nodo).hide();
                return false;
            } else {
                $(".oculto").hide("slow");
                $(nodo).fadeToggle("fast");
                return false;
            }
        });

        $('#radioBtn a').on('click', function () {
            var sel = $(this).data('title');
            var tog = $(this).data('toggle');
            $('#' + tog).prop('value', sel);

            $('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]').removeClass('active').addClass('notActive');
            $('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeClass('notActive').addClass('active');
        })
    });

O bootstrap tem funcionalidades que facilitam muito sua vida e para este caso eu recomendo o Tabs/Pills (Documentação). Seu exemplo ficaria assim:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#cpf">CPF</a></li>
    <li><a data-toggle="tab" href="#cnpj">CNPJ</a></li>
</ul>

<div class="tab-content">
    <div id="cpf" class="tab-pane fade in active">
        <!--Campo Nome-->
        <div class="col-md-4 col-xs-4">
            <div class="form-group">
                <label for="nome">Nome:</label>
                <div class="input-group">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-user" id="basic-addon-nome"></span>
                    </div>
                    <input type='text' name='nome' id="id_nome" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
                </div>
            </div>
        </div>
        <!--Fim Campo Nome-->
        <!--Campo CPF-->
        <div class="col-md-3 col-xs-4">
            <div class="form-group">
                <label for="cpf">CPF:</label>
                <div class="input-group">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
                    </div>
                    <input type='text' name='cpf' id="id_cpf" class="form-control" maxlength='30' required autofocus placeholder='Apenas Números' onkeyup="limite_cpf(this)"><br>
                </div>
            </div>
        </div>
        <!--Fim Campo CPF-->
    </div>
    <div id="cnpj" class="tab-pane fade">
        <!--Campo RAZAO_SOCIAL-->
        <div class="col-md-4 col-xs-4">
            <div class="form-group">
                <label for="razao_social">Razão Social:</label>
                <div class="input-group">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-user" id="basic-addon-razao_social"></span>
                    </div>
                    <input type='text' name='razao_social' id="id_razao_social" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
                </div>
            </div>
        </div>
        <!--Fim Campo RAZAO_SOCIAL-->
        <!--Campo NOME_FANTASIA-->
        <div class="col-md-3 col-xs-4">
            <div class="form-group">
                <label for="razao_social">Nome Fantasia:</label>
                <div class="input-group">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-user" id="basic-addon-nome_fantasia"></span>
                    </div>
                    <input type='text' name='razao_social' id="id_razao_social" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
                </div>
            </div>
        </div>
        <!--Fim Campo NOME_FANTASIA-->
        <!--Campo CNPJ-->
        <div class="col-md-3 col-xs-4">
            <div class="form-group">
                <label for="razao_social">CNPJ:</label>
                <div class="input-group">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
                    </div>
                    <input type='text' name='cnpj' id="id_cnpj" class="form-control" maxlength='30' required autofocus placeholder='Apenas Números' onkeyup="limite_cnpj(this)"><br>
                </div>
            </div>
        </div>
        <!--Fim Campo CNPJ-->
    </div>
</div>
</body>

Abaixo segue o seu código com minhas alterações.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    #radioBtn .notActive {
      color: #3276b1;
      background-color: #fff;
    }
</style>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<script>
    $(document).ready(function () {
        $(".oculto").hide();
        $(".inf").click(function () {
            var nodo = $(this).attr("href");

            if ($(nodo).is(":visible")) {
                //$(nodo).hide();
                return false;
            } else {
                $(".oculto").hide("slow");
                $(nodo).fadeToggle("fast");
                return false;
            }
        });

        $('#radioBtn a').on('click', function () {
            var sel = $(this).data('title');
            var tog = $(this).data('toggle');
            $('#' + tog).prop('value', sel);

            $('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]').removeClass('active').addClass('notActive');
            $('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeClass('notActive').addClass('active');
        })

        $('.active')[0].click();
    });
</script>
<!--TIPO DE CLIENTE-->
<h4>
    <b>
        Tipo de Cliente:<h4>
            <div class="row">
                <div class="col-md-4">
                    <div class="input-group">
                        <div id="radioBtn" class="btn-group">
                            <a class="btn btn-primary btn-sm active inf" href="#info1" data-toggle="happy" data-title="cpf">CPF</a>
                            <a class="btn btn-primary btn-sm notActive inf" href="#info2" data-toggle="happy" data-title="cnpj">CNPJ</a>
                        </div>
                    </div>
                </div>
            </div>
            <!--FIM TIPO DE CLIENTE-->
            <!-- COLUNA CPF-->
            <div class="row oculto" id="info1">
                <!--Campo Nome-->
                <div class="col-md-4 col-xs-4">
                    <div class="form-group">
                        <label for="nome">Nome:</label>
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-user" id="basic-addon-nome"></span>
                            </div>
                            <input type='text' name='nome' id="id_nome" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
                        </div>
                    </div>
                </div>
                <!--Fim Campo Nome-->
                <!--Campo CPF-->
                <div class="col-md-3 col-xs-4">
                    <div class="form-group">
                        <label for="cpf">CPF:</label>
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
                            </div>
                            <input type='text' name='cpf' id="id_cpf" class="form-control" maxlength='30' required autofocus placeholder='Apenas Números' onkeyup="limite_cpf(this)"><br>
                        </div>
                    </div>
                </div>
                <!--Fim Campo CPF-->

            </div>
            <!--FIM COLUNA CPF-->
            <!-- COLUNA CNPJ-->
            <div class="row oculto" id="info2">
                <!--Campo RAZAO_SOCIAL-->
                <div class="col-md-4 col-xs-4">
                    <div class="form-group">
                        <label for="razao_social">Razão Social:</label>
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-user" id="basic-addon-razao_social"></span>
                            </div>
                            <input type='text' name='razao_social' id="id_razao_social" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
                        </div>
                    </div>
                </div>
                <!--Fim Campo RAZAO_SOCIAL-->
                <!--Campo NOME_FANTASIA-->
                <div class="col-md-3 col-xs-4">
                    <div class="form-group">
                        <label for="razao_social">Nome Fantasia:</label>
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-user" id="basic-addon-nome_fantasia"></span>
                            </div>
                            <input type='text' name='razao_social' id="id_razao_social" class="form-control" required autofocus placeholder='Ex.: José Emanoel' onkeyup="limite_nome_fantasia(this)"><br>
                        </div>
                    </div>
                </div>
                <!--Fim Campo NOME_FANTASIA-->
                <!--Campo CNPJ-->
                <div class="col-md-3 col-xs-4">
                    <div class="form-group">
                        <label for="razao_social">CNPJ:</label>
                        <div class="input-group">
                            <div class="input-group-addon">
                                <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
                            </div>
                            <input type='text' name='cnpj' id="id_cnpj" class="form-control" maxlength='30' required autofocus placeholder='Apenas Números' onkeyup="limite_cnpj(this)"><br>
                        </div>
                    </div>
                </div>
                <!--Fim Campo CNPJ-->

            </div>
            <!--FIM COLUNA CNPJ-->
</body>
</html>
4
  • No meu layout atual, como posso fazer para o capo nome e cpf aparecerem logo ativos como no seu exemplo?
    – Carlos
    16/03/2019 às 14:37
  • Você pode adicionar o código $('.active')[0].click(); no final do seu script. Ele aciona o clique no primeiro elemento com a classe de estile 'active'.
    – Onaiggac
    18/03/2019 às 12:52
  • Obrigado pela resposta, mas, dessa forma não deu certo.
    – Carlos
    18/03/2019 às 13:11
  • Editei a resposta com código completo funcional.
    – Onaiggac
    18/03/2019 às 16:25
0

Para fazer com que o botão CPF não fique selecionado desde o inicio, basta alterar a classe active por notActive

Errado (active):

<a class="btn btn-primary btn-sm active inf" href="#info1" data-toggle="happy" data-title="cpf">CPF</a>

Certo (notActive):

<a class="btn btn-primary btn-sm notActive inf" href="#info1" data-toggle="happy" data-title="cpf">CPF</a>
3
  • Tão simples e eu não me atentei. Mto obrigado amigo.
    – Carlos
    16/03/2019 às 13:07
  • Amigo, pode me dizer como posso dizer que o elemento visível é "required"?
    – Carlos
    16/03/2019 às 16:41
  • você pode colocar o required no input usando o javascript, sempre que for alterado entre CPF e CNPJ ele altera em qual input ficaria o required 18/03/2019 às 19:27

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 .