Atributos checked e css Jquery

[Guilherme Luiz 41]

Fala pessoal

 

Seguinte, olhem esse código que fiz

$(document).ready(function() {
$('#origin_1').change(function(){
  if($('#origin_1').prop('checked')){
    $('#originInput_1').css('display','block');
    $('#origin_2').attr('disabled', $('#origin_2').disabled = true);$('label.btn-danger').css('cursor','not-allowed');$('span.toggle-handle').css('cursor','not-allowed');
  }else{
    $('#originInput_1').css('display','none'); $('label.btn-danger').css('cursor',''); $('span.toggle-handle').css('cursor','');
    $('#origin_2').attr('disabled', $('#origin_2').disabled = false);
  }
});
});

Problema com ele? Não, nenhum!

O que ele faz? Baseado se um checkbox está checado ou não, os demais check da pagina recebem atributos

 

Necessidade de "encurta-lo" e deixa-lo mais limpo? Sim!

 

Baseado nisso eu tenho a seguinte situação:

Uma pagina com 2 checkbox que por default não estão checados.

 

Quando o primeiro checkbox - #origin_1 é checado, eu incluo o atributo disabled no segundo checkbox #origin_2 e aplico alguns atributos CSS como block numa div e alteração de cursor em alguns outros que são relacionados a esse segundo checkbox. E quando o check #origin_1 é "des"checado, eu então - no else do meu código - aplico os atributos css originais da pagina e tiro o disabled do segundo check #origin_2

 

A pergunta:

Essa pagina, amanha ou depois, poderei ter 4~5~6 checkbox que precisarão passar por esse fluxo de alterações.

Hoje como tenho apenas 2 checkbox, isso é moleza mas imagine eu ter que repetir todo esse código para cada um dos checkbox, ou seja, terei quase 100 linhas de código para a alteração de aplicação de efeito css em 4 ou 5 itens apenas e logo isso é completamente insustentável.

 

O que eu gostaria:

Sugestões de como reduzir esse código baseado nesse fluxo que comentei.

 

Abraço

[tiagosabadini 4]

Fala Guilherme, fiquei com dúvida em alguns pontos, talvez porque você não tenha postado o seu html.

Por exemplo: Você habilita/desabilita o "#origin_2" com base nele mesmo? Então você manipula ele em outro lugar, eu imagino.

 

Vamos ao código:

$(document).ready(function() {
	$('.checkbox').change(function(){
      var relInput = $(this).attr('data-relinput');
      var relOrigin = $(this).attr('data-relorigin');
      var tChecked = $(this).attr('checked');
      $('#'+relInput).css('display', (tChecked) ? 'block' : 'none');
      $('#'+relOrigin).prop('disabled', (index, value)  => value);
      $('label.btn-danger, span.toggle-handle').css('cursor', (tChecked) ? 'not-allowed' : '');
  });
});

1. Utilize classes para referenciar elementos que se repetem e recebem os mesmos eventos e dentro das chamadas você identifica quem é quem através do $(this);

2. Utilize os atributos data-* para identificar elementos vinculados a outro. Assim seu código fica mais enxuto.