Disable Input if Determined Button Radio is Selected

Question

Disable Input if Determined Button Radio is Selected

Navigation

#1 by (2 votes)

2

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

If Individuals, you will see CPF (mandatory) and RG (mandatory);

If Legal Entity, appears Corporate Name (mandatory), CNPJ (mandatory) and I.E;

Everything is working perfectly, but due to the validation, I need to choose for example Pessoa Física the fields of the legal entity would have the html disabled="disabled" or some function that would leave the field disabled. Because the way it is, even though it is hidden the validation script tries to validate it, thus returning error.

Check out the current script .

Note: To test validation, you must click to fill in 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();

});

javascript jquery

asked by anonymous 06.10.2016 / 16:38

1 answer

Access level and hierarchy when marking a checkboxes Problem in catching latitude and longitude android 5

score 2 · Accepted Answer

You need to check which option is checked on the radius and only apply the appropriate validation.

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

Here are some commented changes:

// 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><divid="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">