jQuery с ASP.NET Веб-формы для бедной старой серверной разработки

Question

Хорошо, будучи разработчиком сервера, этот Javascript-вуду на странице ASP.NET (на основе главной страницы), отображаемой на клиенте, кажется, для меня немного чересчур :-)

Я решил попробовать использовать jQuery для обработки некоторых включений и отключений элементов пользовательского интерфейса на стороне клиента.

У меня есть два переключателя (rbnDoLimit и rbnDontLimit), и три флажка (months12, months24, months36) - если я нажму на rbnDoLimit, Я бы хотел включить все три из них, если я нажму на rbnDontLimit, Мне нравится снимать и отключать три флажка.Кажется достаточно простым, не так ли?

Итак, я скачал и включил jQuery 1.3.2 в свою ASP.NET веб-форму 3.5 - работает нормально, я могу отобразить "оповещение" в $ (document).событие ready.

Мои две переключающие кнопки отображаются на странице в виде:

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

и мои три флажка в качестве:

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

Я украсил их с помощью CSS-класса dcDetails (который не существует, но предназначен для использования для их выбора в jQuery).Первое, что я заметил, это то, что класс CSS не был применен к моему <input> элементы, как и ожидалось, но на <span> элемент вокруг <input>......(первая загадка для меня.....).В любом случае.....

Моя первая попытка jQuery выглядит следующим образом:

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

Не повезло - я могу нажимать на два переключателя сколько угодно - ничего не происходит.Я предполагаю, что это происходит потому, что dcDetails Класс CSS находится на <span> вокруг флажков, верно?

Хорошо, так что это становится немного грязнее, но это должно сработать!!Теперь я специально устанавливаю три флажка по их ClientID - я подумал, что это должно быть точно и содержать правильные элементы:

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

И снова безуспешно......

Так какого черта я упускаю??Все эти замечательные демо-версии, похоже, не могут помочь мне понять, почему это не работает - ни капельки....Я предполагаю, что я упускаю что-то очень базовое, очень фундаментальное - но я просто не могу понять, что это такое!:-)

Марк

Обновить:
пока не очень повезло :-( Я сократил свой образец до простой HTML-страницы - но у меня снова и снова возникает эта ошибка, независимо от того, какой из различных советов я пробую:

Сведения об ошибке веб-страницы

Сообщение:Объект не поддерживает это свойство или метод Строка:3032 Обугливающийся:6 Код:0 URI:file:///D:/projects/JQuery1/jquery-1.3.2.js

Похоже, что это ошибка глубоко внутри jQuery.......есть какие-нибудь идеи?

ОБНОВЛЕНИЕ 2:
Я начинаю думать, что делаю здесь что-то в корне неправильное....Я предположил, что в функции document.ready() я мог бы подключить события щелчка на двух переключателях.Я что-то здесь упускаю?Нужно ли мне вместо этого создать функцию, которую я вызываю из события клиента переключателя "on click"?Что бы я ни пытался сделать, даже в моем HTML-редакторе (TopStyle 4) - эта ошибка "объект не поддерживает это свойство или метод" постоянно появляется - удобно ни то , ни другое сообщая мне, к какому объекту это относится, ни сообщаете мне, какое свойство или метод не поддерживается........

Или я делаю что-то неправильно, пытаясь подключить две функции обработчика событий щелчка в document.ready() ??

Уменьшенная версия, доступная только для HTML, доступна по адресу http://jquery.bluenose.ch/jquerydemo.html для всех, кому может быть интересно - я ожидал, что смогу нажать на переключатель "Ограничить" и отключить три флажка под ним - не пойдет :-(

Answer 1

Я взглянул на ваш пример, и там были некоторые проблемы с синтаксисом.

Ваш пример:

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

Вам не хватало "function (){" после ready и соответствующего "}" в конце.Запятая между событиями to click должна была быть точкой с запятой.Удалите ":input" из селекторов jQuery.Это должно сработать для вас:

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

Answer 2

Попробуйте изменить:

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

Для:

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

и

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

Для:

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

Answer 3

Используй ответ Кирона и тогда...

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

также может быть изменен на:

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

Answer 4

Чтобы отключить флажок (любой элемент управления), я использую следующее

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

Чтобы включить флажок (любой элемент управления), я использую следующее

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

Чтобы ответить на ваш вопрос,

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