Surveillance des modifications DOM dans JQuery

Existe-t-il un moyen de détecter le moment où l’atsortingbut désactivé d’une entrée change dans JQuery. Je veux changer le style en fonction de la valeur.

Je peux copier / coller le même code d’activation / désactivation pour chaque événement de modification (comme je l’ai fait ci-dessous), mais je recherchais une approche plus générique.

Puis-je créer un événement personnalisé qui surveillera l’atsortingbut désactivé des entrées spécifiées?

Exemple:

.disabled{ background-color:#dcdcdc; } 
Option 1 Yes No
Percentage 1:
Percentage 2:
Option 2 Yes No
Percentage 1:
Percentage 2:
$(document).ready(function () { //apply disabled style to all disabled controls $("input:disabled").addClass("disabled"); $("input[name='Group1']").change(function () { var disabled = ($(this).val() == "No") ? "disabled" : ""; $("#Group1Fields input").attr("disabled", disabled); //apply disabled style to all disabled controls $("input:disabled").addClass("disabled"); //remove disabled style to all enabled controls $("input:not(:disabled)").removeClass("disabled"); }); $("input[name='Group2']").change(function () { var disabled = ($(this).val() == "No") ? "disabled" : ""; $("#Group2Fields input").attr("disabled", disabled); //apply disabled style to all disabled controls $("input:disabled").addClass("disabled"); //remove disabled style to all enabled controls $("input:not(:disabled)").removeClass("disabled"); }); });

Après des recherches approfondies sur ce problème, je suis tombé sur un article de Rick Strahl, dans lequel nous présentons un plug-in jQuery permettant de surveiller les propriétés CSS: Le plug-in jQuery CSS Property Monitoring mis à jour

Bien qu’il existe des moyens plus efficaces de résoudre ce problème, une solution consiste à exécuter une fonction toutes les xx secondes qui définira les classes CSS requirejses sur les éléments désactivés:

 window.setInterval(1000,function() { $("input:disabled").addClass("disabled"); $("input:enabled").removeClass("disabled"); }); 

Cela vérifiera tous les éléments en entrée toutes les secondes. Mais encore une fois, c’est une très mauvaise solution. Vous feriez mieux de restructurer votre code.

Sans changer trop de votre code et HTML, je ferais quelque chose comme ceci (je ne l’ai pas testé cependant):

 $("input[name^=Group]").change(function () { var disabled = ($(this).val() == "No") ? "disabled" : ""; var groupName = $(this).attr("name"); $("#" + groupName + "Fields input") .attr("disabled", disabled) .addClass("disabled"); //remove disabled style to all enabled controls $("input:enabled)").removeClass("disabled"); }); 

Je suppose que vous voulez activer les entrées de texte dans le même ensemble de champs, hein? Essayez ceci:

 $('input[type="radio"]').change(function() { if (this.value == "No") { $('input[type="text"]', $(this).parents('fieldset')).attr('disabled', 'disabled'); } else { $('input[type="text"]', $(this).parents('fieldset')).attr('disabled', ''); } }); 

Vous pouvez tirer parti de votre mise en page et faire en sorte que tous vos gestionnaires trouvent des choses relativement, raccourcissant ainsi tout votre code actuel:

 $(function() { $("input:disabled").addClass("disabled"); $(":radio").change(function() { var disabled = this.checked && this.value == "No"; $(this).siblings("div").find("input") .attr('disabled', disabled) .toggleClass('disabled', disabled); }); }); 

Vous pouvez voir une démonstration ici , puisque vous savez quelle classe, quels éléments et que vous le vouliez ou non, vous pouvez utiliser .toggleClass(class, bool) pour raccourcir un peu les choses, mais plus loin. Si vous voulez que ce soit plus précis, vous pouvez donner une classe à ces boutons radio, par exemple:

  

Ensuite, vous pouvez faire $(".toggler") au lieu de $(":radio") , comme pour le div , vous pouvez lui donner une classe et faire .siblings(".fields") au lieu de .siblings("div") … si votre mise en page est cohérente, utilisez-la à votre avantage lors du codage DRY .