jQuery с ASP.NET Веб-формы для бедной старой серверной разработки
-
19-09-2019 - |
Вопрос
Хорошо, будучи разработчиком сервера, этот 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 для всех, кому может быть интересно - я ожидал, что смогу нажать на переключатель "Ограничить" и отключить три флажка под ним - не пойдет :-(
Решение
Я взглянул на ваш пример, и там были некоторые проблемы с синтаксисом.
Ваш пример:
$(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);
});
});
Другие советы
Попробуйте изменить:
$("#<%= months12.ClientID %>").attr('disabled','false')
Для:
$("#<%= months12.ClientID %>").attr('disabled','disabled')
и
$("#<%= months12.ClientID %>").attr('disabled','true')
Для:
$("#<%= months12.ClientID %>").attr('disabled','')
Используй ответ Кирона и тогда...
$("#<%= rbnDontLimit.ClientID %>").click(function() {
$(".dcDetails").attr('disabled','false');
}
также может быть изменен на:
$("#<%= rbnDontLimit.ClientID %>").click(function() {
$(".dcDetails > :checkbox").attr('disabled','disabled');
}
Чтобы отключить флажок (любой элемент управления), я использую следующее
$("#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>