Skip to main content
adicionou 1584 caracteres ao conteúdo
Fonte Link
abfurlan
  • 10,7mil
  • 2
  • 23
  • 48

EDIT: NOVA ESTRUTURA HTML ENVIADA PELO APEDIT: 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>

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>

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>
adicionou 1398 caracteres ao conteúdo
Fonte Link
abfurlan
  • 10,7mil
  • 2
  • 23
  • 48

EDIT: OPÇÃO COM ATRIBUTO DATA

Você também pode adicionar um atributo data para verificar quais são os campos a serem desabilitados, exemplo EDIT: NOVA ESTRUTURA HTML ENVIADA PELO AP

$(document).ready(function () {
  //classe do checkbox
  $(".checkbox").on("blur change", function () {         
  
     
    $('input[type="text"][data-input="'+$(this).datanext('input')+'"]''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' 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' dataname='supervisor1'>
  
  <!-input="ipt-1" name='supervisor1'>
<br/><br/Não pode ficar desabilitado -->
  <input type='text' id='qtd1' class="qtd" name='qtd1'>
</div>


<br><br>

<input type='checkbox' id='recalcular2' data-input="ipt-2" class='checkbox' 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' dataname='supervisor2'>
  
  <!-input="ipt-2" name='supervisor2'>Não pode ficar desabilitado -->
  <input type='text' id='qtd2' class="qtd" name='qtd2'>
</div>

EDIT: OPÇÃO COM ATRIBUTO DATA

Você também pode adicionar um atributo data para verificar quais são os campos a serem desabilitados, exemplo:

$(document).ready(function () {
  //classe do checkbox
  $(".checkbox").on("blur change", function () {         
  
        $('input[type="text"][data-input="'+$(this).data('input')+'"]')
        .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'>
  <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'>
<br/><br/>
  <input type='checkbox' id='recalcular2' data-input="ipt-2" class='checkbox' name='recalcular2'>
  <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'>

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>
adicionou 1398 caracteres ao conteúdo
Fonte Link
abfurlan
  • 10,7mil
  • 2
  • 23
  • 48

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: OPÇÃO COM ATRIBUTO DATA

Você também pode adicionar um atributo data para verificar quais são os campos a serem desabilitados, exemplo:

$(document).ready(function () {
  //classe do checkbox
  $(".checkbox").on("blur change", function () {         
  
        $('input[type="text"][data-input="'+$(this).data('input')+'"]')
        .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'>
  <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'>
<br/><br/>
  <input type='checkbox' id='recalcular2' data-input="ipt-2" class='checkbox' name='recalcular2'>
  <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'>

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>

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: OPÇÃO COM ATRIBUTO DATA

Você também pode adicionar um atributo data para verificar quais são os campos a serem desabilitados, exemplo:

$(document).ready(function () {
  //classe do checkbox
  $(".checkbox").on("blur change", function () {         
  
        $('input[type="text"][data-input="'+$(this).data('input')+'"]')
        .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'>
  <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'>
<br/><br/>
  <input type='checkbox' id='recalcular2' data-input="ipt-2" class='checkbox' name='recalcular2'>
  <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'>

Fonte Link
abfurlan
  • 10,7mil
  • 2
  • 23
  • 48
Carregando