jQuery avec ASP.NET WebForms pour un pauvre vieux serveur dev

Question

OK, étant un développeur de serveur, ce voodoo Javascript est désactivé sur la page ASP.NET (basée sur une page maître) rendu sur le client est un peu trop pour moi, il semble: -)

J'ai décidé d'essayer d'utiliser jQuery pour gérer certains côté client activation et la désactivation des éléments d'interface utilisateur.

J'ai deux boutons radio (rbnDoLimit et rbnDontLimit), et trois cases à cocher (months12, months24, months36) - si je clique sur rbnDoLimit, je voudrais permettre à tous les trois, si je clique sur rbnDontLimit, j'aime pour effacer et désactiver les trois cases. Il semble assez simple, non?

Je téléchargé et jQuery 1.3.2 inclus dans mon ASP.NET 3.5 formulaire en ligne -. Fonctionne OK, je peux afficher une "alerte" sur le $ (document) événement .ready

Mes deux boutons radio se rendus dans la page:

<input id="ctl01_cphContent_pnlBasicInfo_rbnDontLimit" 
       type="radio" name="ctl01$cphContent$pnlBasicInfo$LimitMVD" 
       value="False" checked="checked" />
<input id="ctl01_cphContent_pnlBasicInfo_rbnDoLimit" 
       type="radio" name="ctl01$cphContent$pnlBasicInfo$LimitMVD" 
       value="True" />

et mes trois cases à cocher:

<span class="dcDetails"><input id="ctl01_cphContent_pnlBasicInfo_months12" 
      type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months12" /></span>
<span class="dcDetails"><input id="ctl01_cphContent_pnlBasicInfo_months24" 
      type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months24" /></span>
<span class="dcDetails"><input id="ctl01_cphContent_pnlBasicInfo_months36" 
      type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months36" /></span>

Je les parai d'une classe CSS de dcDetails (qui n'existe pas - mais est destiné à être utilisé pour les sélectionner dans jQuery). La première chose que je remarque est que la classe CSS n'a pas été appliquée à mes éléments de <input> comme prévu, mais sur un élément <span> autour du <input> ...... (le premier mystère pour moi .....). Quoi qu'il en soit .....

Ma première tentative jQuery ressemble à ceci:

<script type="text/javascript">
    $(document).ready(
        $("#<%= rbnDontLimit.ClientID %>").click(function() {
            $(".dcDetails").attr('disabled','false'); 
        },
        $("#<%= rbnDoLimit.ClientID %>").click(function() {
            $(".dcDetails").attr('disabled','true'); 
        });
</script>

Pas de chance - je peux cliquer sur les deux boutons radio tout ce que je veux - rien ne se passe. Je suppose que cela est parce que la classe dcDetails CSS est sur le <span> autour des cases à cocher, à droite?

OK - il être un peu messier, mais cela devrait travailler !! Maintenant, je sélectionne les trois cases à cocher spécifiquement, par leur ClientID - ce doit être exacte et obtenir les bons éléments, je pensais:

<script type="text/javascript">
    $(document).ready(
        $("#<%= rbnDontLimit.ClientID %>").click(function() {
            $("#<%= months12.ClientID %>").attr('disabled','false'); 
            $("#<%= months24.ClientID %>").attr('disabled','false'); 
            $("#<%= months36.ClientID %>").attr('disabled','false'); 
        },
        $("#<%= rbnDoLimit.ClientID %>").click(function() {
            $("#<%= months12.ClientID %>").attr('disabled','true'); 
            $("#<%= months24.ClientID %>").attr('disabled','true'); 
            $("#<%= months36.ClientID %>").attr('disabled','true'); 
        });
</script>

Encore une fois, pas de chance ......

Alors, que diable suis-je manque ?? Tous ces grands démos flashy ne semblent pas me aider à comprendre pourquoi cela ne fonctionne pas - même pas un peu .... Je pense que je manque quelque chose très simple, très fondamentaux - mais je ne peux pas sembler figurer out, ce qui est! : -)

Marc

Mise à jour: n'ont pas eu beaucoup de chance encore :-( je déshabillai mon échantillon à une page HTML barebone - mais je continue à avoir cette erreur maintes et maintes et maintes fois, peu importe lequel des différents conseils que j'essaie:

détails de l'erreur Webpage

Message: Cet objet ne gère pas cette propriété ou méthode Ligne: 3032 Char: 6 Code: 0 URI: file: /// D: /projects/JQuery1/jquery-1.3.2.js

semble presque être une erreur profonde à l'intérieur jQuery ....... des idées?

Mise à jour 2: Je commence à penser que je fais quelque chose de fondamentalement mal ici .... Je suppose que dans la fonction document.ready (), je pourrais brancher les événements de clic sur les deux boutons radio. Est-ce que j'ai râté quelque chose? Est-ce que je dois créer une fonction que j'appel du client du bouton radio « sur clic » événement au lieu? Tout ce que je suis en train de le faire, même dans mon éditeur HTML (TopStyle 4) - cette erreur « objet ne prend pas en charge cette propriété ou méthode » cesse d'apparaître tout le temps - commodément ni me disant que objet auquel il se réfère, ni me dire ce que la propriété ou méthode non prise en charge ........

Ou que je fais quelque chose de mal à essayer de brancher deux fonctions de gestionnaire d'événements, cliquez dans le document.ready () ??

La réduite, seule version HTML est disponible à http://jquery.bluenose.ch/jquerydemo .html pour tous ceux qui pourraient être intéressés - Je pensais pouvoir cliquer sur le bouton radio « Do Limit » et faites-le désactiver les trois cases à cocher en dessous - no go: - (

Answer 1

Je pris un coup d'oeil à votre exemple et il y avait des problèmes de syntaxe.

Votre exemple:

 $(document).ready(
    $('#rbnDontLimit').click(function() {
        $(".dcDetails :input").removeAttr('disabled');
    }),
    $("#rbnDoLimit").click(function() {
        $('.dcDetails :input').attr('disabled', 'true');
    }));

Vous avez été absent de la « function () { » après le prêt et son correspondant « } » à la fin. La virgule entre cliquer sur les événements aurait dû être un point-virgule. Retirez le « : entrée » des sélecteurs jQuery. Cela devrait fonctionner pour vous:

   $(document).ready(function() {
        $('#rbnDontLimit').click(function() {
            $(".dcDetails").removeAttr('disabled');
        });
        $("#rbnDoLimit").click(function() {
            $('.dcDetails').attr('disabled', true);
        });
    });

Answer 2

Essayez de changer:

$("#<%= months12.ClientID %>").attr('disabled','false')

à:

$("#<%= months12.ClientID %>").attr('disabled','disabled')

et

$("#<%= months12.ClientID %>").attr('disabled','true')

à:

$("#<%= months12.ClientID %>").attr('disabled','')

Answer 3

Réponse Utilisons Kieron puis ...

$("#<%= rbnDontLimit.ClientID %>").click(function() {
            $(".dcDetails").attr('disabled','false'); 
}

pourrait également être changé à:

$("#<%= rbnDontLimit.ClientID %>").click(function() {
            $(".dcDetails > :checkbox").attr('disabled','disabled'); 
}

Answer 4

Pour désactiver une case à cocher (aucun contrôle), j'utilise ce qui suit

$("#chkSomething").attr("disabled", "true")

Pour activer une case à cocher (aucun contrôle), j'utilise ce qui suit

$("#chkSomething").removeAttr("disabled")

Pour répondre à votre question,

<script type="text/javascript">
    $(document).ready(
        $("#<%= rbnDontLimit.ClientID %>").click(function() {
            $("#<%= months12.ClientID %>").removeAttr("disabled"); 
            $("#<%= months24.ClientID %>").removeAttr("disabled"); 
            $("#<%= months36.ClientID %>").removeAttr("disabled"); 
        },
        $("#<%= rbnDoLimit.ClientID %>").click(function() {
            $("#<%= months12.ClientID %>").attr('disabled','true'); 
            $("#<%= months24.ClientID %>").attr('disabled','true'); 
            $("#<%= months36.ClientID %>").attr('disabled','true'); 
        });
</script>