Surveillance des modifications DOM dans JQuery

Question

Y at-il un moyen de détecter quand l'attribut désactivé d'une entrée change dans JQuery. Je veux basculer le style en fonction de la valeur.

Je peux copier/coller le même code d'activation/désactivation pour chaque événement de changement (comme je l'ai fait ci-dessous) mais je cherchais une approche plus générique. Puis-je créer un événement personnalisé qui surveillera l'attribut désactivé des 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> 

Answer 1

Après avoir étudié cette question plus, je suis tombé sur un billet de blog par Rick Strahl dans lequel nous démontre plug-in qui permet une jQuery pour la surveillance des propriétés CSS: jQuery CSS Property Monitoring Plug-in updated

Answer 2

Je suppose que vous voulez activer les entrées de texte dans la même fieldset, hein? Donnez à ce essayer:

$('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', ''); 
    } 
}); 

Answer 3

Bien qu'il existe des moyens plus efficaces de lutter contre ce problème, une façon de traiter c'est en exécutant une fonction toutes les xx secondes qui définira les classes CSS requises sur les éléments handicapés:

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

Ceci vérifie tous les éléments d'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 HTML et, je ferais quelque chose comme ça (ne pas le tester si):

$("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"); 
    }); 

Answer 4

Vous pouvez profiter de votre mise en page et de faire tous vos gestionnaires trouvent des choses relativement, ce qui réduit tout votre code actuel ceci:

$(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); 
    }); 
}); 

You can view a demo here, aussi, puisque vous savez quelle classe, éléments et si vous voulez ou le désactiver, vous pouvez utiliser .toggleClass(class, bool) pour raccourcir les choses un mais plus loin. 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"), même pour la div, vous pouvez lui donner une classe et faire .siblings(".fields") au lieu de .siblings("div") ... le point est que si votre mise en page est cohérente, utilisez-la à votre avantage lorsque DRY coding.