Как включить отключенные радиокнопки?

Следующий код отлично работает в IE, но не в FF или Safari. Я не могу понять, почему. Код должен отключать радиокнопки, если вы выбираете опцию «Отключить 2 радиокнопки». Он должен включать радиокнопки, если вы выбираете опцию «Включить обе радиокнопки». Оба они работают...

Однако если вы не используете мышь для перемещения между двумя опциями («Включить...» и «Отключить...»), то переключатели не будут отображаться как отключенные или включенные правильно, пока вы не щелкнете в любом другом месте страницы (не на самих переключателях).

Если у кого-то есть время/любопытство/чувство помощи, пожалуйста, вставьте код ниже в html-страницу и загрузите ее в браузере. Он отлично работает в IE, но проблема проявляется в FF (3 в моем случае) и Safari, все на Windows XP.

function SetLocationOptions() {
  var frmTemp = document.frm;
  var selTemp = frmTemp.user;
  if (selTemp.selectedIndex >= 0) {
    var myOpt = selTemp.options[selTemp.selectedIndex];
    if (myOpt.attributes[0].nodeValue == '1') {
      frmTemp.transfer_to[0].disabled = true;
      frmTemp.transfer_to[1].disabled = true;
      frmTemp.transfer_to[2].checked = true;
    } else {
      frmTemp.transfer_to[0].disabled = false;
      frmTemp.transfer_to[1].disabled = false;
    }
  }
}
<form name="frm" action="coopfunds_transfer_request.asp" method="post">
  <select name="user" onchange="javascript: SetLocationOptions()">
    <option value="" />Choose One
    <option value="58" user_is_tsm="0" />Enable both radio buttons
    <option value="157" user_is_tsm="1" />Disable 2 radio buttons
  </select>
  <br /><br />
  <input type="radio" name="transfer_to" value="fund_amount1" />Premium   
  <input type="radio" name="transfer_to" value="fund_amount2" />Other   
  <input type="radio" name="transfer_to" value="both" CHECKED />Both
  <br /><br />
  <input type="button" class="buttonStyle" value="Submit Request" />
</form>

Эм, это работает в IE10 и FF.

3 ответа

Чтобы заставить FF имитировать поведение IE при использовании клавиатуры, вы можете использовать событие keyup в поле выбора. В вашем примере (я не фанат присоединения обработчиков событий таким образом, но это уже другая тема) это будет выглядеть так:

<select name="user" id="selUser" onchange="javascript:SetLocationOptions()" onkeyup="javascript:SetLocationOptions()">

Ну, у IE несколько нестандартная объектная модель; то, что вы делаете, не должно работать, но вам это сходит с рук, потому что IE к вам хорошо относится. В Firefox и Safari document.frm в вашем коде оценивается как undefined.

Вам необходимо использовать значения идентификаторов в элементах формы и использовать document.getElementById('whatever'), чтобы вернуть ссылку на них вместо ссылки на несуществующие свойства объекта документа.

Итак, это работает немного лучше и может дать то, что вам нужно:

Line 27: <form name="frm" id="f" ...
Line 6: var frmTemp = document.getElementById('f');

Но если вы хотите узнать больше о том, как правильно действовать, вам, возможно, стоит прочитать эту замечательную книгу: «Скриптинг DOM» Джереми Кейта.

И раз уж мы заговорили об этом, книга «Пуленепробиваемый Ajax» того же автора также заслуживает места на вашей книжной полке, как и «JavaScript: The Good Parts» Дуга Крокфорда.

Почему бы не воспользоваться одной из библиотек скриптов AJAX? Они абстрагируют большую часть черной магии кроссбраузерных скриптов DOM и значительно упрощают жизнь.

Разница в стиле закрытия - JavaScript

В чем разница в стиле закрытия? В JavaScript есть два популярных стиля замыкания. Первый я называю анонимным конструктором: new function() { var code... } и встроенная выполняемая функция: (function() { var code... })(); есть ли разница в поведении между этими двумя? Один «лучше» другого? В обоих случаях функция будет выполнена, единственное реальное различие заключается в том, каким может быть возвращаемое значение выражения и каким будет значение «this» внутри функции. В основном поведение new expression Фактически эквивалентно var tempObject = {}; var result = expression.call(tempObject); if (result is not an object) result = tempObject; Хотя, конечно, tempObject и result — это временные значения, которые вы никогда не увидите (это детали реализации в интерпретаторе), и не существует механизма JS для проверки «не является объектом». В общем случае метод «new function() { .. }» будет медленнее из-за необходимости создания объекта this для…

Подробнее »

Получение текста из выпадающего списка

Это возвращает значение того, что выбрано в моем выпадающем меню. document.getElementById('newSkill').value Однако я не могу найти, какое свойство использовать для текста, который в данный момент отображается в раскрывающемся меню. Я попробовал "text", но это не дало ответа, кто-нибудь здесь знает? Для тех, кто не уверен, вот HTML-код раскрывающегося списка. <select name="newSkill" id="newSkill"> <option value="1">A skill</option> <option value="2">Another skill</option> <option value="3">Yet another skill</option> </select> На…

Подробнее »

JavaScript должен запускаться при отображении ModalPopupExtender

ASP _ NET AJAX ModalPopupExtender имеет свойства OnCancelScript и OnOkScript, но, похоже, не имеет свойства OnShowScript. Я хотел бы указать функцию javascript для запуска каждый раз, когда отображается всплывающее окно. В прошлых ситуациях я устанавливал фиктивный элемент управления TargetControlID и предоставлял свой собственный элемент управления, который сначала выполняет некоторый код JS, а затем использует методы JS для отображения всплывающего окна. Но в этом…

Подробнее »