jQuery con ASP.NET WebForms per un povero vecchio server di dev

Question

OK, essendo uno sviluppatore server, questo voodoo Javascript nella pagina ASP.NET (sulla base di una pagina master) il rendering sul client è un po 'troppo per me, sembra: -)

Ho deciso di provare ad usare jQuery per gestire alcune lato client attivazione e disattivazione degli elementi dell'interfaccia utente.

Ho due pulsanti di opzione (rbnDoLimit e rbnDontLimit), e tre caselle di controllo (months12, months24, months36) - se clicco su rbnDoLimit, mi piacerebbe per permettere a tutti e tre di loro, se clicco su rbnDontLimit, mi piace cancellare e disattivare i tre caselle. Sembra abbastanza semplice, giusto?

Così ho scaricato e incluso jQuery 1.3.2 nel mio ASP.NET 3.5 moduli elettronici -. Funziona bene, posso visualizzare un "avviso" sul $ (document) evento .ready

I miei due pulsanti di opzione vengono resi nella pagina in:

<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" />

ei miei tre caselle di controllo come:

<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>

li ho ornato con una classe CSS di dcDetails (che non esiste - ma è destinato ad essere utilizzato per selezionandoli in jQuery). La prima cosa che ho notato è che la classe CSS non è stato applicato ai miei elementi <input> come previsto, ma su un elemento <span> intorno al <input> ...... (il primo mistero per me .....). Comunque .....

Il mio primo tentativo di jQuery è simile al seguente:

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

Nessuna fortuna - posso cliccare sui due pulsanti di opzione All I Want - non succede nulla. Presumo che questo è perché la classe dcDetails CSS è sul <span> intorno alle caselle di controllo, giusto?

OK - in modo da ottenere un po 'disordinato, ma questo dovrebbe funzionare !! Ora sto selezionando le tre caselle di controllo specifico, per la loro ClientID - questo dovrebbe essere esatti e ottenere gli elementi giusti, ho pensato:

<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>

Anche in questo caso, senza fortuna ......

Quindi, cosa diavolo mi manca ?? Tutti questi grandi demo sgargianti non riesco a aiutarmi a capire il motivo per cui questo non sta funzionando - nemmeno un po '.... Credo che mi manca qualcosa di molto semplice, molto fondamentali - ma io proprio non riesco a capire fuori, di cosa si tratta! : -)

Marc

UPDATE:
non hanno avuto molta fortuna ancora :-( ho messo a nudo il mio campione ad una pagina HTML barebone - ma io continuo ad avere questo errore più e più e più volte, non importa quale dei vari suggerimenti che cerco:

Webpage dettagli di errore

Messaggio: L'oggetto non supporta questa proprietà o metodo Linea: 3032 Char: 6 Codice: 0 URI: file: /// D: /projects/JQuery1/jquery-1.3.2.js

sembra quasi essere un errore profondo jQuery ....... tutte le idee?

UPDATE 2:
Sto cominciando a pensare che sto facendo qualcosa di fondamentalmente sbagliato qui .... ho pensato che nella funzione document.ready (), ho potuto collegare gli eventi click sui due pulsanti di opzione. Mi sto perdendo qualcosa qui? Avrei bisogno di creare una funzione che io chiamo dal client del pulsante di scelta "al clic" evento, invece? Qualunque cosa che sto cercando di fare, anche nel mio editor HTML (TopStyle 4) - questo errore "oggetto non supporta questa proprietà o metodo" continua dilagano in tutto il tempo - comodamente non che mi diceva che oggetto si riferisce a, non a dirmi cosa proprietà o metodo non supportato ........

O sto facendo qualcosa di sbagliato cercando di collegare due funzioni di gestione evento click nel document.ready () ??

L', HTML unica versione in scala è disponibile all'indirizzo http://jquery.bluenose.ch/jquerydemo .html per chiunque che potrebbe essere interessato - mi aspettavo di essere in grado di fare clic sul pulsante di opzione "Do Limit" e lo hanno disabilitare le tre caselle sottostanti - no go: - (

Answer 1

Ho preso uno sguardo al vostro esempio e ci sono stati alcuni problemi di sintassi.

Il vostro esempio:

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

ti mancava il "function () {" dopo il pronto e il suo corrispondente "}" alla fine. La virgola tra la cliccare eventi avrebbe dovuto essere un punto e virgola. Rimuovere la ": input" dai selettori di jQuery. Questo dovrebbe funzionare per voi:

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

Answer 2

Prova a cambiare:

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

a:

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

e

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

a:

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

Answer 3

La risposta di Usa Kieron e poi ...

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

potrebbe anche essere cambiato in:

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

Answer 4

Per disattivare una casella di controllo (qualsiasi controllo), uso il seguente

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

Per consentire una casella di controllo (nessun controllo), io uso il seguente

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

Per rispondere alla tua domanda,

<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>