jQuery с ASP.NET WebForms для плохого старого сервера - PullRequest
Новая
       14

jQuery с ASP.NET WebForms для плохого старого сервера

2 голосов
/ 20 августа 2009

ОК, будучи разработчиком сервера, этот Javascript voodoo на странице 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>

Опять не повезло ......

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

Марк

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

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

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

Кажется, что глубоко внутри jQuery есть ошибка ....... есть идеи?

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

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

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

Ответы [ 4 ]

3 голосов
/ 20 августа 2009

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

Ваш пример: 

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

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

   $(document).ready(function() {
        $('#rbnDontLimit').click(function() {
            $(".dcDetails").removeAttr('disabled');
        });
        $("#rbnDoLimit").click(function() {
            $('.dcDetails').attr('disabled', true);
        });
    });
1 голос
/ 20 августа 2009

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

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

до: 

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

и 

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

до: 

$("#<%= months12.ClientID %>").attr('disabled','')
0 голосов
/ 20 августа 2009

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

$("#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>
0 голосов
/ 20 августа 2009

Воспользуйтесь ответом Киерона, а затем ... 

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

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

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