Surveillance DOM Changements dans JQuery

Est-il un moyen de détecter le moment où les personnes handicapées de l'attribut d'une entrée change dans JQuery. Je veux basculer le style basé sur la valeur.

Je peux copier/coller le même activer/désactiver le code pour chaque événement de changement (comme je l'ai fait ci-dessous) mais j'ai été la recherche d'une approche plus générique.

Puis-je créer un événement personnalisé qui permettra de surveiller les personnes handicapées de l'attribut d'entrées spécifiées?

Exemple:

 <style type="text/css">.disabled{ background-color:#dcdcdc; }</style>
<fieldset>
<legend>Option 1</legend>
<input type="radio" name="Group1" id="Radio1" value="Yes" />Yes
<input type="radio" name="Group1" id="Radio2" value="No" checked="checked" />No
<div id="Group1Fields" style="margin-left: 20px;">
Percentage 1:
<input type="text" id="Percentage1" disabled="disabled" /><br />
Percentage 2:
<input type="text" id="Percentage2" disabled="disabled" /><br />
</div>
</fieldset>
<fieldset>
<legend>Option 2</legend>
<input type="radio" name="Group2" id="Radio3" value="Yes" checked="checked" />Yes
<input type="radio" name="Group2" id="Radio4" value="No" />No
<div id="Group2Fields" style="margin-left: 20px;">
Percentage 1:
<input type="text" id="Text1" /><br />
Percentage 2:
<input type="text" id="Text2" /><br />
</div>
</fieldset>
<script type="text/javascript">
$(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");
});           
});
</script>
InformationsquelleAutor Rokal | 2010-06-10
  1. 4

    Après de plus amples recherches sur ce problème, je suis tombé sur un post de blog par Rick Strahl dans qui nous montre un plug-in jQuery qui permet la surveillance de propriétés CSS: jQuery CSS Propriété de Surveillance Plug-in mis à jour

    InformationsquelleAutor Rokal
  2. 1

    Bien qu'il existe des moyens plus efficaces de s'attaquer à ce problème, une façon de ce traitement est par l'exécution d'une fonction toutes les xx secondes qui permettra de définir les classes CSS sur désactivé éléments:

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

    Il s'agira de vérifier la saisie de tous les éléments à chaque seconde. Mais encore une fois, c'est une TRÈS mauvaise solution. Vous feriez mieux de la restructuration de votre code.

    Sans changer trop de votre code et HTML, je voudrais faire quelque chose comme cela (ne pas le tester tout de même):

    $("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");
});
    • Merci de répondre. Je suppose que votre solution ne fonctionne pas mais il semble définitivement comme un hack. Heureusement, il y a une meilleure façon!
    • 1 Ce n'est pas une bonne idée. Pour l'un, c'est mauvais pour la performance, et de deux, il y aura toujours une sorte de décalage avec le présent.
    • N'est-ce pas ce que je veux dire? Citation: "c'est une TRÈS mauvaise solution"
    InformationsquelleAutor Philippe Leybaert
  3. 0

    Je suppose que vous voulez activer la saisie de textes dans le même fieldset, hein? Donner à ceci un essai:

    $('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', '');
}
});
    • S'il vous plaît re-lecture de la question. Je suis à la recherche pour détecter le moment où les personnes handicapées les changements d'attribut pour toute entrée sur la page. Je vais avoir un nombre important d'entrées sur la page et vous ne voulez pas de répéter la même logique à chaque changement de gestionnaire d'événements.
    InformationsquelleAutor landons
  4. 0

    Vous pouvez profiter de votre mise en page et de faire toutes vos gestionnaires à trouver des choses relativement, le raccourcissement de tout votre code ce:

    $(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émo ici, également puisque vous savez quelle classe, les éléments et que vous le vouliez ou non, vous pouvez utiliser .toggleClass(classe, bool) de raccourcir les choses un, mais plus. Si vous voulez que ce soit plus précis, vous pouvez donner à ces boutons radio une classe, par exemple:

    <input type="radio" name="Group1" id="Radio1" value="Yes" class="toggler" />

    Ensuite, vous pouvez faire $(".toggler") au lieu de $(":radio"), de même pour le div, de lui donner une de la classe et ne .siblings(".fields") au lieu de .siblings("div")...le point est que si votre mise en page est conforme, l'utiliser à votre avantage lorsque SEC de codage.

    • Merci de répondre à Nick. Je ne suis pas tellement préoccupés par la Sécheresse du code. Ce n'était qu'un exemple, et je ne pense pas que ma mise en page devrait être suffisamment souple, si cela peut fonctionner dans toutes les situations. J'espérais à l'utilisation d'un concours complet de stratégie pour résoudre le problème.
    InformationsquelleAutor Nick Craver