Disable Input if Specified Radio Button Is Selected

Question

I have a registration form, which the person selects if she is a Legal Person, and appear the fields to fill when selecting and I have a Jquery script that does the validation so that it is mandatory to select and fill these fields after selection.

If Individual, appears CPF (mandatory) and RG (mandatory);

If Legal Person, appears Social Reason (mandatory), CNPJ (mandatory) and I.E;

Everything is working perfectly, but due to validation, I need you to choose for example Pessoa Física the legal entity fields were left with html disabled="disabled" or a function that left the field disabled. Because the way it is, even if it is hidden the validation script tries to validate it, thus returning error.

See here the working script.

Note: To test the validation it is necessary to click to fill the field 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">

PART OF 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();

}); 

Answer 1

You need to check which option is marked on the radio and only apply appropriate validation.

There are some elements with the same id (id="campo-obrigatorio") the ID parameter should always be unique, although sometimes it works, undesirable effects usually happen, when you need to select several elements in a selection prefer to use a class.

Below are some commented modifications:

// função ready esta obsoleto
$(function() {
  // 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 == '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();

  $("#input-payment-custom-field3").addClass('cpf_cnpj');
  $("#input-payment-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() == '3') {
      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() == '4') {
      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();
      }
    }
  });

});

.c-obrigatorio {
  display: block !important;
}
.e-obrigatorio {
  display: none !important;
}
.input-erro {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

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