0

Tenho uma função jQuery, que oculta ou exibe alguns campos de acordo com o radio selecionado. Porém eu preciso que seja ocultado todos os campos se o radio não estiver com nenhum valor marcado.

O código funciona, mas no Opencart os campos CPF, RG, CNPJ, Razão Social e IE não ficam ocultados em estado inicial.

Tentei setar o primeiro radio, mas mesmo assim a função só funciona quando marca outro radio.

Página do código no Opencart

Segue o código funcionando:

Note que o Opencart adiciona automaticamente nas div o código style="display: block;" talvez mudar este código para style="display: none;" através de jQuery poderia resolver, mas eu não consegui.

    $(function() {
        
        $('#custom-field2, #custom-field3, #custom-field4, #custom-field5, #custom-field6').hide();
        
      // definir variavel global com o radiogroup
      var $radio = $('input:radio[name^="custom_field[account][1]"]');
    
      $radio.on("change", function() {
        var chosen = this.checked && this.value == '1';
        $("#custom-field2, #custom-field3").toggle(chosen).find('input').attr('disabled', !chosen);
    
        $("#custom-field4, #custom-field5, #custom-field6").toggle(!chosen).find('input').attr('disabled', chosen);
      });
    
      $('[id^="input-custom-field"]:disabled').closest('.form-group.custom-field').hide();
    
      $("#input-custom-field3").addClass('cpf_cnpj');
      $("#input-custom-field5").addClass('cpf_cnpj');
    
      $("#input-email").focusin(function() {
    
        if (!$radio.is(':checked')) {
          alert("Escolha o tipo de pessoa");
          $radio.focus();
        }
    
        // checar se o radio selecionado é o CPF e aplicar a devida validação
        if ($radio.filter(':checked').val() == '1') {
            $('#custom-fiel4, #custom-field5, #custom-field6').show();
          if (($('#input-custom-field2').val().length < 3) && ($('#input-custom-field3').val().length < 3)) {
            $('label[for="label-custom-field2"], label[for="label-custom-field3"]').addClass('c-obrigatorio text-danger');
            $("#input-custom-field2, #input-custom-field3").addClass('input-erro');
            $('label[for="label-custom-field4"], label[for="label-custom-field5"], label[for="label-custom-field6"]').addClass('e-obrigatorio');
            $('#input-custom-field3').focus();
          } else if ($('#input-custom-field3').val().length < 3) {
            $('label[for="label-custom-field3"]').addClass('c-obrigatorio text-danger');
            $("#input-custom-field3").addClass('input-erro');
            $('label[for="label-custom-field2"], label[for="label-custom-field4"], label[for="label-custom-field5"], label[for="label-custom-field6"]').addClass('e-obrigatorio');
            $('#input-custom-field3').focus();
          } else if ($('#input-custom-field2').val().length < 3) {
            $('label[for="label-custom-field2"]').addClass('c-obrigatorio text-danger');
            $("#input-custom-field2").addClass('input-erro');
            $('label[for="label-custom-field3"], label[for="label-custom-field4"], label[for="label-custom-field5"], label[for="label-custom-field6"]').addClass('e-obrigatorio');
            $('#input-custom-field2').focus();
          }
        }
    
        // checar se o radio selecionado é o CNPJ e aplicar a devida validação
        if ($radio.filter(':checked').val() == '2') {
          if (($('#input-custom-field4').val().length < 3) && ($('#input-custom-field5').val().length < 3)) {
            $('label[for="label-custom-field4"], label[for="label-custom-field5"]').addClass('c-obrigatorio text-danger');
            $("#input-custom-field4, #input-custom-field5").addClass('input-erro');
            $('#input-custom-field4').focus();
          } else if ($('#input-custom-field4').val().length < 3) {
            $('label[for="label-custom-field4"]').addClass('c-obrigatorio text-danger');
            $("#input-custom-field2").addClass('input-erro');
            $('label[for="label-custom-field2"], label[for="label-custom-field3"], label[for="label-custom-field5"], label[for="label-custom-field6"]').addClass('e-obrigatorio');
            $('#input-custom-field4').focus();
          } else if ($('#input-custom-field5').val().length < 3) {
            $('label[for="label-custom-field5"]').addClass('c-obrigatorio text-danger');
            $("#input-custom-field5").addClass('input-erro');
            $('label[for="label-custom-field2"], label[for="label-custom-field3"], label[for="label-custom-field4"], label[for="label-custom-field6"]').addClass('e-obrigatorio');
            $('#input-custom-field5').focus();
          }
        }
      });
      
    
        
    
    });
    
    
                            function vCPF(cpf) {
                                cpf = cpf.replace(/[^\d]+/g,'');
                                
                                if(cpf == '' || cpf.length != 11) return false;
                                
                                var resto;
                                var soma = 0;
                                
                                if (cpf == "00000000000" || cpf == "11111111111" || cpf == "22222222222" || cpf == "33333333333" || cpf == "44444444444" || cpf == "55555555555" || cpf == "66666666666" || cpf == "77777777777" || cpf == "88888888888" || cpf == "99999999999" || cpf == "12345678909") return false;
                                
                                for (i=1; i<=9; i++) soma = soma + parseInt(cpf.substring(i-1, i)) * (11 - i);
                                resto = (soma * 10) % 11;
                                
                                if ((resto == 10) || (resto == 11))  resto = 0;
                                if (resto != parseInt(cpf.substring(9, 10)) ) return false;
                                
                                soma = 0;
                                for (i = 1; i <= 10; i++) soma = soma + parseInt(cpf.substring(i-1, i)) * (12 - i);
                                resto = (soma * 10) % 11;
                                
                                if ((resto == 10) || (resto == 11))  resto = 0;
                                if (resto != parseInt(cpf.substring(10, 11) ) ) return false;
                                return true;
                            }
                            function vCNPJ(cnpj) {
                                cnpj = cnpj.replace(/[^\d]+/g,'');
    
                                if(cnpj == '' || cnpj.length != 14) return false;
    
                                if (cnpj == "00000000000000" || cnpj == "11111111111111" || cnpj == "22222222222222" || cnpj == "33333333333333" || cnpj == "44444444444444" || cnpj == "55555555555555" || cnpj == "66666666666666" || cnpj == "77777777777777" || cnpj == "88888888888888" || cnpj == "99999999999999") return false;
    
                                var tamanho = cnpj.length - 2
                                var numeros = cnpj.substring(0,tamanho);
                                var digitos = cnpj.substring(tamanho);
                                var soma = 0;
                                var pos = tamanho - 7;
                                
                                for (i = tamanho; i >= 1; i--) {
                                  soma += numeros.charAt(tamanho - i) * pos--;
                                  if (pos < 2)
                                        pos = 9;
                                }
                                
                                var resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
                                
                                if (resultado != digitos.charAt(0)) return false;
    
                                tamanho = tamanho + 1;
                                numeros = cnpj.substring(0,tamanho);
                                soma = 0;
                                pos = tamanho - 7;
                                
                                for (i = tamanho; i >= 1; i--) {
                                  soma += numeros.charAt(tamanho - i) * pos--;
                                  if (pos < 2) pos = 9;
                                }
                                
                                resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
                                
                                if (resultado != digitos.charAt(1)) return false;
    
                                return true; 
                            }
                            $("input[placeholder]").each( function () {
                                if ($(this).attr("placeholder").indexOf("CPF")>=0) {
                                    var cId = $(this).attr("id");
                                    $(this).mask('000.000.000-00', {
                                        onComplete: function(val, e, field, options) {
                                            if (!vCPF(val)) {
                                                alert("Digite um CPF válido!");
                                                $("#"+cId).val("");
                                            }
                                        },
                                        placeholder: "___.___.___-__"
                                    });
                                }
                                if ($(this).attr("placeholder").indexOf("CNPJ")>=0) {
                                    var cnId = $(this).attr("id");
                                    $(this).mask('00.000.000/0000-00', {
                                        onComplete: function(val, e, field, options) {
                                            if (!vCNPJ(val)) {
                                                alert("Digite um CNPJ válido!");
                                                $("#"+cnId).val("");
                                            }
                                        },
                                        placeholder: "__.___.___/____-__"
                                    });
                                }
    
                            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="custom-field1" class="form-group custom-field required" data-sort="3" style="display: block;">
        <label class="col-sm-2 control-label">Tipo de Pessoa</label>
        <div class="col-sm-10">
            <div>
                <div class="radio">
                    <label>
                        <input type="radio" name="custom_field[account][1]" value="1">
                            Pessoa Física
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="custom_field[account][1]" value="2">
                            Pessoa Jurídica</label>
                </div>
            </div>
        </div>
    </div>
    
    <div id="custom-field4" class="form-group custom-field" data-sort="4" style="display: block;">
        <label class="col-sm-2 control-label" for="input-custom-field4">Razão Social</label>
        <div class="col-sm-10">
            <input type="text" name="custom_field[account][4]" value="" placeholder="	Razão Social" id="input-custom-field4" class="form-control">
        </div>
    </div>
    
    <div id="custom-field5" class="form-group custom-field" data-sort="5" style="display: block;">
        <label class="col-sm-2 control-label" for="input-custom-field5">CNPJ</label>
        <div class="col-sm-10">
            <input type="text" name="custom_field[account][5]" value="" placeholder="__.___.___/____-__" id="input-custom-field5" class="form-control cpf_cnpj">
        </div>
    </div>
    
    <div id="custom-field6" class="form-group custom-field" data-sort="6" style="display: block;">
        <label class="col-sm-2 control-label" for="input-custom-field6">I.E</label>
        <div class="col-sm-10">
            <input type="text" name="custom_field[account][6]" value="" placeholder="I.E" id="input-custom-field6" class="form-control">
        </div>
    </div>
    
    <div id="custom-field3" class="form-group custom-field" data-sort="5" style="display: block;">
        <label class="col-sm-2 control-label" for="input-custom-field3">CPF</label>
        <div class="col-sm-10">
            <input type="text" name="custom_field[account][3]" value="" placeholder="___.___.___-__" id="input-custom-field3" class="form-control cpf_cnpj">
        </div>
    </div>
    
    <div id="custom-field2" class="form-group custom-field" data-sort="4" style="display: block;">
        <label class="col-sm-2 control-label" for="input-custom-field2">RG</label>
        <div class="col-sm-10">
            <input type="text" name="custom_field[account][2]" value="" placeholder="RG" id="input-custom-field2" class="form-control">
        </div>
    </div>
    
    <div class="form-group required">
        <label class="col-sm-2 control-label" for="input-email">E-mail</label>
        <div class="col-sm-10">
            <input type="email" name="email" value="" placeholder="E-mail" id="input-email" class="form-control">
        </div>
    </div>

    <input type="submit" value="Continuar" class="btn btn-primary">

2
  • A comunidade existe para ser útil a todos, não somente a você, caso o link se perca, o código não será mais acessível. Traga seu código para sua pergunta ao invés de utilizar um fiddle externo, por gentileza. Commented 6/12/2016 às 12:10
  • Recomendo que leia o tópico completo, mas no seu caso seria Links para o código completo Commented 6/12/2016 às 12:14

1 Resposta 1

0

De forma simples adiciona isso =)

$(window).ready(function(){
  $('input:radio[name^="custom_field[account][1]"]').change()
})
1
  • Onde eu adiciono este código? Pois coloquei antes de $(function() { e não funcionou.
    – Wendell
    Commented 6/12/2016 às 13:43

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 .