2

Bom no exemplo que eu postei eu consigo desabilitar os input valor1, vendedor1 e supervisor1 ao marcar a opção recalcular1.

O problema e que tenho um formulário com vários input, e para evitar um código muito grande eu queria fazer o jqeury identificar o número do checkbox e desabilitar apenas os inputs do mesmo número.

Exemplo: O recalcular1 desabilita dos campos valor1, vendedor1 e supervisor1.

O recalcular2 desabilita dos campos valor2, vendedor2 e supervisor2.

Alguém sabe uma forma prática de fazer isso?

$(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>

3 Respostas 3

3

Se você puder alterar seu código html e envolver os inputs com uma div por exemplo, você poderá usar a função siblings do jquery para isso, exemplo:

$(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: NOVA ESTRUTURA HTML ENVIADA PELO 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>

Outra opção é a de utilizar um atributo data para identificar os campos, exemplo:

$(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>

7
  • Ficou legal sua solução, porém o meu checkbox não fica na mesma div que os input. Isso é uma coisa que não da para eu alterar. Commented 10/07/2017 às 17:20
  • @HugoBorges poste a estrutura do seu html, para ver se podemos ajudar.
    – abfurlan
    Commented 10/07/2017 às 17:20
  • Pronto, editei a resposta com um exemplo da minha estrutura html. Commented 10/07/2017 às 17:29
  • @HugoBorges veja minha edição se atende, você terá que verificar a próxima div, encontrar todos os inputs dentro dela excluindo o da quantidade, portanto precisará de uma classe neste campo.
    – abfurlan
    Commented 10/07/2017 às 17:44
  • 1
    Dessa forma ficou muito bom, obrigado. deu certo aqui Commented 10/07/2017 às 19:07
2

Aproveitando a deixa do @LeandroSilva, acima, você pode simplificar o código guardando no checkbox o nome da classe dos campos que tem que desabilitar:

$(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>

Como você pode ver, criamos um atributo data-controles em cada checkbox com o seletor que seleciona os controles que têm que ser desabilitados quando aquela checkbox for marcada. O evento change de cada checkbox usa o this para pegar o seletor que lhe compete e desabilitar ou habilitar os controles que forem selecionados por aquele seletor.

2
  • Perfeito, simplificou bem o código.
    – Leandro
    Commented 10/07/2017 às 21:30
  • @Wtrmute, ficou muito bom. Commented 10/07/2017 às 22:47
1

Uma solução possível também seria definir uma class para cada grupo de inputs e associá-la ao ckeckbox correspondente, conforme exemplo abaixo:

$(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>

1
  • O problema e que meu formulário tem uns 30 campos, o jQuery ia ficar muito grande. Commented 10/07/2017 às 17:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .