Disable input sequence with jQuery

Navigation
2

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

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 checkbox and disable only the inputs of the same number.

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

The recalcular2 disables the valor2 , vendedor2 , and supervisor2 fields.

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><scriptsrc="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>
    
asked by anonymous 10.07.2017 / 19:08

3 answers

3

If you can change your html code and involve inputs with a div for example, you can use the siblings of 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><inputtype='checkbox'id='recalcular1'class='checkbox'name='recalcular1'><inputtype='text'id='valor1'name='valor1'><inputtype='text'id='vendedor1'name='vendedor1'><inputtype='text'id='supervisor1'name='supervisor1'></div><div><inputtype='checkbox'id='recalcular2'class='checkbox'name='recalcular2'><inputtype='text'id='valor2'name='valor2'><inputtype='text'id='vendedor2'name='vendedor2'><inputtype='text'id='supervisor2'name='supervisor2'></div>

EDIT:NEWHTMLSTRUCTURESENTBYAP

$(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><inputtype='checkbox'id='recalcular1'class='checkbox'name='recalcular1'><div><inputtype='text'id='valor1'name='valor1'><inputtype='text'id='vendedor1'name='vendedor1'><inputtype='text'id='supervisor1'name='supervisor1'><!--Nãopodeficardesabilitado--><inputtype='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 a data attribute to identify the fields, eg: 

$(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><inputtype='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>
    
10.07.2017 / 19:13
2

Taking advantage of the @LeandroSilva cue, above, you can simplify the code by saving in the checkbox the class name of the fields that you have to disable: 

$(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><scriptsrc="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 create a data-controles attribute on each checkbox with the selector that selects the controls that have to be disabled when that checkbox is checked. The change event of each checkbox uses this to pick up the selector that matches it and disable or enable the controls that are selected by that selector.

    
10.07.2017 / 21:38
1

A possible solution would also be to define a class for each group of inputs and associate it with the corresponding ckeckbox , as shown 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><scriptsrc="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>
    
10.07.2017 / 19:37
What is the origin of green in the hacker culture? [closed] Body or entity that sets standards for web development