Disable input sequence with jQuery

Asked

Viewed 406 times

2

Good in the example I posted I can disable the input valor1, vendedor1 and supervisor1 by checking the option recalcular1.

The problem is that I have a form with several input, and to avoid a very large code I wanted to make the jqeury identify the number of the checkbox and disable only inputs from the same number.

Example: The recalcular1 disable from the fields valor1, vendedor1 and supervisor1.

The recalcular2 disable from the fields valor2, vendedor2 and supervisor2.

Does anyone know a practical way to do this?

$(document).ready(function() {
  $("#recalcular1").on("blur change", function() {

    // Verifica se exibe
    if ($("#recalcular1").is(':checked')) {
      $("#valor1").prop('disabled', true);
      $("#vendedor1").prop('disabled', true);
      $("#supervisor1").prop('disabled', true);
    } else {
      $("#valor1").prop('disabled', false);
      $("#vendedor1").prop('disabled', false);
      $("#supervisor1").prop('disabled', false);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type='checkbox' id='recalcular1' class='checkbox' name='recalcular1'>

<div>
  <input type='text' id='valor1' name='valor1'>
  <input type='text' id='vendedor1' name='vendedor1'>
  <input type='text' id='supervisor1' name='supervisor1'>
  
  <!-- Não pode ficar desabilitado -->
  <input type='text' id='qtd1' name='qtd1'>
</div>


<br><br>

<input type='checkbox' id='recalcular2' class='checkbox' name='recalcular2'>

<div>
  <input type='text' id='valor2' name='valor2'>
  <input type='text' id='vendedor2' name='vendedor2'>
  <input type='text' id='supervisor2' name='supervisor2'>
  
  <!-- Não pode ficar desabilitado -->
  <input type='text' id='qtd2' name='qtd2'>
</div>

javascript jquery

3 answers

3


If you can change your html code and involve the inputs with a div for example, you can use the function siblings jquery for this, example:

$(document).ready(function () {
  //classe do checkbox
  $(".checkbox").on("blur change", function () {         
        //se estiver marcado
        if( $(this).is(':checked') ){
            //desabilita todos os "irmãos" do elemento
            $(this).siblings('input').prop('disabled','disabled');
        } else {
            $(this).siblings('input').prop('disabled',false);
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type='checkbox' id='recalcular1' class='checkbox' name='recalcular1'>
  <input type='text' id='valor1' name='valor1'>
  <input type='text' id='vendedor1' name='vendedor1'>
  <input type='text' id='supervisor1' name='supervisor1'>
</div>

<div>
  <input type='checkbox' id='recalcular2' class='checkbox' name='recalcular2'>
  <input type='text' id='valor2' name='valor2'>
  <input type='text' id='vendedor2' name='vendedor2'>
  <input type='text' id='supervisor2' name='supervisor2'>
</div>

EDIT: NEW HTML STRUCTURE SENT BY AP

$(document).ready(function() {
  $(".checkbox").on("blur change", function() {
    
    $(this).next('div')//prox div
    .find('input:not(.qtd)')//busca input
    .prop('disabled', $(this).is(':checked'));//desabilita se estiver marcado
    
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type='checkbox' id='recalcular1' class='checkbox' name='recalcular1'>

<div>
  <input type='text' id='valor1' name='valor1'>
  <input type='text' id='vendedor1' name='vendedor1'>
  <input type='text' id='supervisor1' name='supervisor1'>
  
  <!-- Não pode ficar desabilitado -->
  <input type='text' id='qtd1' class="qtd" name='qtd1'>
</div>


<br><br>

<input type='checkbox' id='recalcular2' class='checkbox' name='recalcular2'>

<div>
  <input type='text' id='valor2' name='valor2'>
  <input type='text' id='vendedor2' name='vendedor2'>
  <input type='text' id='supervisor2' name='supervisor2'>
  
  <!-- Não pode ficar desabilitado -->
  <input type='text' id='qtd2' class="qtd" name='qtd2'>
</div>

Another option is to use an attribute data to identify the fields, example:

$(document).ready(function() {
  $(".checkbox").on("blur change", function() {   
    var dataInput = $(this).data('input');
    $('input[data-input="' + dataInput + '"]:not(.checkbox)').prop('disabled',$(this).is(':checked'));
    
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' id='recalcular1' data-input="ipt-1" class='checkbox' name='recalcular1'>

<div>
  <input type='text' id='valor1' data-input="ipt-1" name='valor1'>
  <input type='text' id='vendedor1' data-input="ipt-1" name='vendedor1'>
  <input type='text' id='supervisor1' data-input="ipt-1" name='supervisor1'>
  
  <!-- Não pode ficar desabilitado -->
  <input type='text' id='qtd1' class="qtd" name='qtd1'>
</div>


<br><br>

<input type='checkbox' id='recalcular2' class='checkbox' data-input="ipt-2" name='recalcular2'>

<div>
  <input type='text' id='valor2' data-input="ipt-2" name='valor2'>
  <input type='text' id='vendedor2' data-input="ipt-2" name='vendedor2'>
  <input type='text' id='supervisor2' data-input="ipt-2" name='supervisor2'>
  
  <!-- Não pode ficar desabilitado -->
  <input type='text' id='qtd2' class="qtd" name='qtd2'>
</div>

  • Your solution was legal, but mine checkbox doesn’t stay the same div that the input. That’s one thing I can’t change.

  • @Hugoborges posts the structure of your html, to see if we can help.

  • Okay, I edited the answer with an example of my html structure.

  • @Hugoborges see my issue meets, you will have to check the next div, find all inputs within it excluding the quantity, so you will need a class in this field.

  • It was good, but this way I get tied to the layout, is there any way to do it using an attribute? Like this: var inputValor = $(this).attr("valor"); &#xA; $("#" + inputValor).prop('disabled', true);

  • @Hugoborges you can also do so https://jsfiddle.net/8qz86skh/

  • 1

    That way it got really good, thanks. it worked out here

Show 2 more comments

2

Taking advantage of the @Leandrosilva’s cue above, you can simplify the code by keeping the name of the class of fields you have to disable in the checkbox:

$(document).ready(function() {
  $(":checkbox").on("change", function() {
    var seletor = $(this).data("controles");
    $(seletor).prop('disabled', $(this).is(':checked'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type='checkbox' id='recalcular1' name='recalcular1' data-controles='.campos1'>

<div>
  <input type='text' class='campos1' id='valor1' name='valor1'>
  <input type='text' class='campos1' id='vendedor1' name='vendedor1'>
  <input type='text' class='campos1' id='supervisor1' name='supervisor1'>
  
  <!-- Não pode ficar desabilitado -->
  <input type='text' id='qtd1' name='qtd1'>
</div>


<br><br>

<input type='checkbox' id='recalcular2' name='recalcular2' data-controles='.campos2'>

<div>
  <input type='text' class='campos2' id='valor2' name='valor2'>
  <input type='text' class='campos2' id='vendedor2' name='vendedor2'>
  <input type='text' class='campos2' id='supervisor2' name='supervisor2'>
  
  <!-- Não pode ficar desabilitado -->
  <input type='text' id='qtd2' name='qtd2'>
</div>

As you can see, we’ve created an attribute data-controles in each checkbox with the selector that selects the controls that have to be disabled when that checkbox is marked. The event change of each checkbox uses the this to take your chosen selector and disable or enable the controls that are selected by that selector.

  • Perfect, simplified the code well.

  • @Wtrmute, it looks really good.

1

A possible solution would also be to define a class for each group of inputs and associate it with ckeckbox corresponding as example below: 

$(document).ready(function() {
  $(":checkbox").on("change", function() {
    // Grupo de campos 1
    if ($("#recalcular1").is(':checked')) {
      $(".campos1").prop('disabled', true);
    } 
    else {
      $(".campos1").prop('disabled', false);
    }
    // Grupo de campos 2
    if ($("#recalcular2").is(':checked')) {
      $(".campos2").prop('disabled', true);
    } 
    else {
      $(".campos2").prop('disabled', false);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type='checkbox' id='recalcular1' name='recalcular1'>

<div>
  <input type='text' class='campos1' id='valor1' name='valor1'>
  <input type='text' class='campos1' id='vendedor1' name='vendedor1'>
  <input type='text' class='campos1' id='supervisor1' name='supervisor1'>
  
  <!-- Não pode ficar desabilitado -->
  <input type='text' id='qtd1' name='qtd1'>
</div>


<br><br>

<input type='checkbox' id='recalcular2' name='recalcular2'>

<div>
  <input type='text' class='campos2' id='valor2' name='valor2'>
  <input type='text' class='campos2' id='vendedor2' name='vendedor2'>
  <input type='text' class='campos2' id='supervisor2' name='supervisor2'>
  
  <!-- Não pode ficar desabilitado -->
  <input type='text' id='qtd2' name='qtd2'>
</div>

  • The problem is that my form has about 30 fields, jQuery would get very big.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.