0

Pessoal estou com um problema!

tenho um Radio que recebo o valor do banco

                            <div class="radio">
                            <label>
                                <input  type="radio" name="empresa_tipo"  value="J" <?php echo ($empresa->empresa_tipo == "J") ? "checked" : null; ?>  class="ace" />
                                <span class="lbl"> Pessoa Jurídica</span>
                            </label>
                            <label>
                                <input type="radio"  name="empresa_tipo" value="F"  <?php echo ($empresa->empresa_tipo == "F") ? "checked" : null; ?>  class="ace" />
                                <span class="lbl"> Pessoa Física</span>
                            </label>
                        </div>

porem esse radio, quando selecionado executa a função em js que habilita ou desabilita uns campos

segue script

$(document).ready(function() {
                $('input:radio[name="empresa_tipo"]').on("change", function() {
                        if (this.checked && this.value == 'J') {
                                $("#razao_social, #CNPJ").show();
                                $("#data_nascimento, #CPF, #estado-civil, #sexo").hide();
                        } else {
                                $("#data_nascimento, #CPF, #estado-civil, #sexo ").show();
                                $("#razao_social, #CNPJ").hide();
                        }
                });
        });

porem quando eu recebo do banco o valor e passo para o radio qual vai receber o Checked, ele não desabilita ou habilita, não executa a função somente quando eu click no radio que vai executar a função. como faço para usar o

checked

ao invés do

change

na função?

Observe os campos

<div class="form-group" id="sexo"  >
                        <label class=" col-sm-3 control-label bolder blue">Sexo</label>

                        <div class="col-sm-9">
                        <div class="radio">
                            <label>
                                <input  type="radio" name="empresa_sexo" id="empresa_sexo" value="M" <?php echo ($empresa->empresa_sexo == "M") ? "checked" : null; ?>   class="ace" />
                                <span class="lbl">Masculino</span>
                            </label>
                            <label>
                                <input type="radio"  name="empresa_sexo" id="empresa_sexo" value="F" <?php echo ($empresa->empresa_sexo == "F") ? "checked" : null; ?>   class="ace" />
                                <span class="lbl">Feminino</span>
                            </label>
                            <label>
                                <input  type="radio" name="empresa_sexo" id="empresa_sexo" value="O" <?php echo ($empresa->empresa_sexo == "O") ? "checked" : null; ?>   class="ace" />
                                <span class="lbl">Outros</span>
                            </label>
                        </div>


                    </div>
                </div>
                        <div class="space-4"></div>

                        <div class="form-group" id="CPF" >
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> CPF </label>

                            <div class="col-sm-9">
                                <input type="text" id="empresa_cpf" name="empresa_cpf"  value="<?= $empresa->empresa_cpf ?>"  class="col-xs-10 col-sm-5 input-mask-eyescript" />
                            </div>
                        </div>
                        <div class="form-group" id="CNPJ" >
                            <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> CNPJ </label>

                            <div class="col-sm-9">
                                <input type="text" id="empresa_cnpj" name="empresa_cnpj"  value="<?= $empresa->empresa_cnpj ?>"  class="col-xs-10 col-sm-5 input-mask-eyescript-2" />
                            </div>
                        </div>
                        <div class="space-4"></div>

3 Respostas 3

1

Isso acontece pois a função change não foi chamada, já que a página foi carregada e o rádio pré selecionado. você pode resolver seu problema, acionando a função change logo que a página é carregada. Exemplo:

$(document).ready(function() {
  $('input:radio[name="empresa_tipo"]').trigger("change");
  $('input:radio[name="empresa_tipo"]').on("change", function() {
    var estado = this.checked && this.value == 'J';
    $("#razao_social, #CNPJ").toggle(estado);
    $("#data_nascimento, #CPF, #estado-civil, #sexo").toggle(!estado);
  }).change();
});

edit:

Estou inserindo uma função alternativa que resolveria seu problema, pois não encontrei a resposta exata:

<script>
    $(document).ready(function() {

        verificaCpfCnpj();

        $('input:radio[name="empresa_tipo"]').change(function() {
            verificaCpfCnpj();
        });
    });

    function verificaCpfCnpj(){
        if($(":radio:checked").val()  == 'J'){
            $("#razao_social, #CNPJ").show();
            $("#data_nascimento, #CPF, #estado-civil, #sexo").hide();
        }else{
            $("#data_nascimento, #CPF, #estado-civil, #sexo ").show();
            $("#razao_social, #CNPJ").hide();
        }
    }
</script>
13
  • A intenção é essa quando carregar a pagina, de acordo com oque vai vim do banco de é PF = F ou PJ = J. fiz oque vc falou, mas não ocorreu como esperado, apareceu todos os campo, só ocultou quando cliquei no radio
    – Jean Prado
    30/05/2017 às 19:10
  • sim, eu entendi. Vc precisa adicionar esta linha ao seu código: $('input:radio[name="empresa_tipo"]').trigger("change"); como segue no exemplo. para que depois de carregar a página, ele acione a função que vai validar os inputs desabilitados e exibir da forma correta. 30/05/2017 às 19:10
  • editei a pergunta colocando os campos que tem que aparecer e ocultar
    – Jean Prado
    30/05/2017 às 19:12
  • Já usei o seu exemplo Diego, mas não deu certo
    – Jean Prado
    30/05/2017 às 19:13
  • 1
    Deu Certinho dessa forma que você passou, muito obrigado
    – Jean Prado
    31/05/2017 às 14:43
1

O ideal seria enviares os campos escondidos do servidor. Assim os campos não aparecem antes do JavaScript correr e podes manter o código como tens.

Para correr a função quando a página carrega podes manter como está (pois é util quando o valor muda) e fazer somente .change() para correr esse código.

$(document).ready(function() {
  $('input:radio[name="empresa_tipo"]').on("change", function() {
    var estado = this.checked && this.value == 'J';
    $("#razao_social, #CNPJ").toggle(estado);
    $("#data_nascimento, #CPF, #estado-civil, #sexo").toggle(!estado);
  }).change();
});
-1

$(function(){
  $('.radio input').change(function(){
      if ($(this).val() === 'J'){
         //...
      }
      else {
         //...
      }
  })
});

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 .