Disable hidden DIV

Asked

Viewed 95 times

0

I have an html code with java script that shows and hides the fields. I would like to know how to disable the div that is currently hidden ? And also if you notice the code the Cpf button already appears selected, I would like to make it blue (selected only after the click).

Follow my code below:

$('#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-->

php javascript html5 twitter-bootstrap
  • 1

    What do you mean disable the div that is hidden?

2 answers

1

The problem in your script is that part of it runs before the DOM loads and so the effect you would like to give to the button does not occur. To fix just put it within $(Document). ready(Function(){...}). Getting so:

    $(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');
        })
    });

The bootstrap has features that make your life much easier and for this case I recommend the Tabs/Pills (Documentation). Your example would look like this:

<!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>

Below follows your code with my changes.

<!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>

  • In my current layout, how can I make the capo name and Cpf appear soon active as in your example?

  • You can add the code $('active')[0]. click(); at the end of your script. It triggers the click on the first element with the 'active style class'.

  • Thank you for your reply, but that did not work.

  • I edited the answer with full functional code.

0


To make the button CPF do not get selected from the start, just change the class active for notActive

Wrong (active):

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

All right (notActive):

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

  • So simple and I did not pay attention. I thank you friend.

  • Friend, can you tell me how I can say that the visible element is "required"?

  • you can put the required in the input using javascript, whenever changed between CPF and CNPJ it changes which input the required

Browser other questions tagged php javascript html5 twitter-bootstrap

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