jQuery com ASP.NET WebForms para um pobre dev servidor antigo

Question

OK, sendo um desenvolvedor de servidor, esta voodoo JavaScript na página ASP.NET (com base em uma página mestra) processado no cliente é um pouco demais para mim, parece: -)

Eu decidi tentar usar jQuery para lidar com alguns do lado do cliente ativação e desativação de elementos de interface do usuário.

Eu tenho dois botões de rádio (rbnDoLimit e rbnDontLimit), e três caixas de seleção (months12, months24, months36) - se eu clicar em rbnDoLimit, eu gostaria de permitir que todos os três, se eu clicar em rbnDontLimit, eu gosto para limpar e desativar as três caixas de seleção. Parece bastante simples, certo?

Então, eu baixei e incluiu jQuery 1.3.2 no meu ASP.NET 3.5 webform - funciona OK, eu posso exibir um "alerta" no (documento) evento .ready $

.

Meus dois botões de rádio são renderizadas na página como:

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

e meus três caixas de seleção como:

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

Eu adornada-los com uma classe CSS de dcDetails (que não existe - mas se destina a ser usado para selecioná-los em jQuery). A primeira coisa que notei é que a classe CSS não foi aplicado aos meus elementos <input> como esperado, mas para um elemento <span> ao redor do <input> ...... (o primeiro mistério para mim .....). Enfim .....

Minha primeira tentativa jQuery esta aparência:

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

Sem sorte - eu posso clicar nos dois botões de rádio tudo que eu quero - nada acontece. Suponho que isso é porque a classe dcDetails CSS está na <span> em torno das caixas, certo?

OK - por isso conseguir um Messier pouco, mas isso deve trabalho !! Agora estou selecionando as três caixas de seleção especificamente, por sua ClientID - isso deve ser exato e obter os elementos certos, eu pensei:

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

Mais uma vez, nenhuma sorte ......

Então o que diabos estou faltando ?? Todas estas grandes demos snazzy não consigo me ajudar a entender por que isso não está funcionando - nem mesmo um pouco .... Eu acho que estou perdendo algo muito básico, muito fundamentos - mas eu simplesmente não consigo entender para fora, o que é isso! : -)

Marc

UPDATE:
Não tive muita sorte ainda :-( I despojado minha amostra para uma página HTML barebones - mas eu continuo tendo esse erro uma e outra e outra vez, não importa qual das várias dicas que eu tente:

detalhes do erro Webpage

Mensagem: O objecto não suporta esta propriedade ou método Linha: 3032 Char: 6 Código: 0 URI: file: /// D: /projects/JQuery1/jquery-1.3.2.js

Quase parece ser um profundo erro dentro jQuery ....... todas as idéias?

UPDATE 2:
Estou começando a pensar que eu estou fazendo algo fundamentalmente errado aqui .... eu assumi que na função document.ready (), eu poderia ligar os eventos de clique nos dois botões de rádio. Estou faltando alguma coisa aqui? Será que eu preciso para criar uma função que eu chamo de cliente do botão de rádio "no clique" evento em vez disso? Tudo o que eu estou tentando fazer, mesmo no meu editor HTML (TopStyle 4) - este erro "objeto não suporta esta propriedade ou método" continua aparecendo o tempo todo - convenientemente não me dizendo que objeto que se refere, nem me dizendo o que propriedade ou método não é suportado ........

Ou estou fazendo algo errado tentar ligar duas funções manipulador de eventos clique no document.ready () ??

A reduzida, HTML única versão está disponível em http://jquery.bluenose.ch/jquerydemo .html para qualquer um que possa estar interessado - Eu esperava ser capaz de clicar no botão de rádio "do Limite" e tê-lo desativar as três caixas de seleção abaixo dela - não ir: - (

Answer 1

Eu levei uma olhada no seu exemplo e houve alguns problemas de sintaxe.

O seu exemplo:

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

Você estava faltando o "function () {" após a pronto e sua correspondente "}" no final. A vírgula entre a clicar eventos deve ter sido um ponto e vírgula. Retire o ": de entrada" dos seletores jQuery. Isso deve funcionar para você:

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

Answer 2

Tente alterar:

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

para:

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

e

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

para:

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

Answer 3

resposta e de Uso Kieron então ...

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

também pode ser alterado para:

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

Answer 4

Para desativar uma caixa de seleção (qualquer controle), eu uso o seguinte

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

Para ativar uma caixa de seleção (qualquer controle), eu uso o seguinte

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

Para responder à sua pergunta,

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