如何启用已禁用的单选按钮？

Question

以下代码在IE中运行良好，但在FF或Safari中不起作用。 我真的想不出为什么。 该代码应该在选择“禁用2个单选按钮”选项时禁用单选按钮。 如果选择“启用两个单选按钮”选项，则应启用单选按钮。 这两个都能正常工作...

然而，如果您不使用鼠标在“启用...”和“禁用...”选项之间移动，则单选按钮似乎无法正确地被禁用或启用，直到您单击页面上的其他区域（而不是单选按钮本身）。

如果有人有时间/好奇/感觉有帮助，请将以下代码粘贴到HTML页面中并在浏览器中加载它。 它在IE中运行良好，但问题在Windows XP上的所有浏览器中（包括我使用的FF 3和Safari）显现。

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&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="fund_amount2" />Other&nbsp;&nbsp;&nbsp;
  <input type="radio" name="transfer_to" value="both" CHECKED />Both
  <br /><br />
  <input type="button" class="buttonStyle" value="Submit Request" />
</form>

- Matt Dawdy

---

哦，这在IE10和FF中可以工作：fiddle - akinuri

Answer 1

要让FF在使用键盘时模仿IE的行为，您可以在选择框上使用keyup事件。在您的示例中（我不喜欢以这种方式连接事件处理程序，但那是另一个话题），代码如下：

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

- Ricky

Answer 2

嗯，IE有一个略微不标准的对象模型；你正在做的事情不应该起作用，但是你之所以能够得逞，是因为IE对你很友好。在Firefox和Safari中，你代码中的document.frm评估为未定义。

您需要在表单元素上使用id值，并使用document.getElementById('whatever')返回对它们的引用，而不是引用文档对象中不存在的属性。

因此，这个方法可能更好一些，可以达到您想要的效果：

Line 27: <form name="frm" id="f" ...

Line 6: var frmTemp = document.getElementById('f');

如果您想了解正确的操作方式，可以查看这本优秀的书籍：DOM Scripting，作者是Jeremy Keith。

此外，与此相关的还有同一作者的Bulletproof Ajax，以及Doug Crockford的JavaScript: The Good Parts，这些书都值得收藏。

- Polsonby

Answer 3

为什么不使用其中一个 AJAX 脚本库呢？它们可以抽象出许多跨浏览器 DOM 脚本黑魔法，并使生活变得轻松得多。

- Kev