Tenho um formulário de cadastro, que a pessoa seleciona se ela é Pessoa Física ou Jurídica, e aparecem os campos para preenchimento ao selecionar e tenho um script Jquery que faz a validação para que seja obrigatório a seleção e preenchimento destes campos após a seleção.
Se Pessoa Física, aparece CPF (obrigatório) e RG (obrigatório);
Se Pessoa Jurídica, aparece Razão Social (obrigatório), CNPJ (obrigatório) e I.E;
Tudo está funcionando perfeitamente, mas devido a validação, eu preciso que ao escolher por exemplo Pessoa Física
os campos da pessoa jurídica ficassem com o html disabled="disabled"
ou alguma função que deixasse desabilitado o campo. Pois do jeito que se encontra, mesmo ele estando oculto o script de validação tenta validá-lo, sendo assim retornando erro.
Veja aqui o script em funcionamento.
Obs: Para testar a validação é necessário clicar para preencher o campo Email
.
HTML:
<div id="custom-field1" class="form-group custom-field" data-sort="3" style="display: block;">
<label class="col-sm-2 control-label">Tipo de Pessoa</label><br><br>
<label>
<input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-3" value="3">Pessoa Física</label><br>
<label>
<input type="radio" name="custom_field[account][1]" id="id-custom_field-account-1-4" value="4">Pessoa Jurídica</label>
</div><br>
<div id="div-custom-field4" class="form-group custom-field" data-sort="4" style="display: none;">
<label class="col-sm-2 control-label" for="input-custom-field4">Razão Social</label><br>
<input type="text" name="custom_field[account][4]" value="" placeholder="Razão Social" id="input-custom-field4" class="form-control">
<label for="label-custom-field4" id="campo-obrigatorio" style="display:none">Campo obrigatório</label>
</div>
<div id="div-custom-field5" class="form-group custom-field" data-sort="5" style="display: none;"><br>
<label class="col-sm-2 control-label" for="input-custom-field5">CNPJ</label><br>
<input type="text" name="custom_field[account][5]" value="" placeholder="__.___.___/____-__" id="input-custom-field5" class="form-control cpf_cnpj" autocomplete="off">
<label for="label-custom-field5" id="campo-obrigatorio" style="display:none">Campo obrigatório</label>
</div>
<div id="div-custom-field6" class="form-group custom-field" data-sort="6" style="display: none;"><br>
<label class="col-sm-2 control-label" for="input-custom-field6">I.E</label><br>
<input type="text" name="custom_field[account][6]" value="" placeholder="I.E" id="input-custom-field6" class="form-control">
<label for="label-custom-field6" id="campo-obrigatorio" style="display:none">Campo obrigatório</label><br><br>
</div>
<div id="div-custom-field3" class="form-group custom-field" data-sort="5" style="display: none;">
<label class="col-sm-2 control-label" for="input-custom-field3">CPF</label><br>
<input type="text" name="custom_field[account][3]" value="" placeholder="___.___.___-__" id="input-custom-field3" class="form-control" autocomplete="off">
<label for="label-custom-field3" id="campo-obrigatorio" style="display:none">Campo obrigatório</label><br><br>
</div>
<div id="div-custom-field2" class="form-group custom-field" data-sort="4" style="display: none;">
<label class="col-sm-2 control-label" for="input-custom-field2">RG</label><br>
<input type="text" name="custom_field[account][2]" value="" placeholder="RG" id="input-custom-field2" class="form-control cpf_cnpj">
<label for="label-custom-field2" id="campo-obrigatorio" style="display:none">Campo obrigatório</label><br><br>
</div>
<label class="col-sm-2 control-label" for="input-email">E-mail</label><br>
<input type="email" name="email" value="" placeholder="E-mail" id="input-email" class="form-control">
PARTE DO JAVASCRIPT:
$(document).ready(function() {
$('input:radio[name^="custom_field[account][1]"]').on("change", function() {
var chosen = this.checked && this.value == '3';
$("#div-custom-field2, #div-custom-field3").toggle(chosen).find('input').attr('disabled', !chosen);
$("#div-custom-field4, #div-custom-field5, #div-custom-field6").toggle(!chosen).find('input').attr('disabled', chosen);
});
$('[id^="input-custom-field"]:disabled').closest('.form-group.custom-field').hide();
});