1

Em meu formulario tenho inputs que so poderão ser editados após uma confirmação do checkbox correspondente, tenho ele a funciona neste momento:

http://jsfiddle.net/thallysondias/rwn73gnp/

utilizo a função do javascritp:

document.getElementById('check-praia').onchange = function() {
document.getElementById('input-praia').disabled = !this.checked;
};

Contudo possuo vários campos, e para cada campo novo tenho que editar o ficheiro .js e adicionar uma nova função.

Como posso deixar este codigo mais inteligente, digo, por exemplo:

PEGAR_ID_DO_CHECKBOX.onchange = function(){
PEGAR_ID_DO_INPUT.disable = !this.checked;
};

A minha ideia era poder pegar automaticamente o id do check e do input e inserir na tag. Sempre que determinada checkbox for clicada ela altera o valor do input.

Visualize o jsfiddle para melhor entendimento.

1 Resposta 1

1

A solução

Como o padrão de hierarquia é muito claro (sempre há um label de classe "checkbox-proximidade" englobando um checkbox; o ID desse checkbox está relacionado com o ID do <input />), podemos fazer um código que tira proveito dessas relações:

var labels = document.getElementsByClassName("checkbox-proximidade");
for(var i = 0; i < labels.length; i++) labels[i].children[0].addEventListener("change", function(e){
    document.getElementById("input-" + e.srcElement.id.split("-")[1]).disabled = !this.checked;
});

O JSFiddle modificado está aqui.

Funcionamento

Em labels, capturamos todos os elementos <label class="checkbox-proximidade">, que possuem os checkboxes.

Para cada um deles (através da instrução for), navegamos até seu único elemento-filho (children[0]) e, nele, adicionamos um listener de evento change.

Cada callback de listener, ao executar, busca por um elemento cujo ID termine com o mesmo sufixo pós-hífen (split("-")[1]) termine com o mesmo sufixo do <input />, e habilitamos/desabilitamos baseados no estado atual desse <input /> (por sinal, apontado por e.srcElement).

Obs.: repare que esta solução pressupõe, além dos padrões de hierarquia já definidos, que cada ID conterá apenas um hífen! Caso utilize mais que um, basta modificar a função de callback para:

function(e){
    var arr_aux = e.srcElement.id.split("-"); // Obtém o array de partes do sufixo.
    arr_aux.splice(0, 1); // Remove a primeira parte, que corresponde a "check".
    // O join(str) une novamente os elementos do array em uma string,
    // ligando-os com a string (str) especificada:
    document.getElementById("input-" + arr_aux.join("-")).disabled = !this.checked;
}
3
  • Exatamente Rui Pimentel, muito obrigado, por acaso podia explicar um pouco o código, para eu poder entender melhor e poder aprender? Commented 13/11/2014 às 16:36
  • 1
    Com certeza. Modifiquei a resposta! :) Commented 13/11/2014 às 16:40
  • Muito obrigado, compreendi a logica, nao sabia que dava para fazer isso. :D Commented 13/11/2014 às 16:44

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 .