如何启用禁用的单选按钮？答案

【问题标题】：How can I enable disabled radio buttons?如何启用禁用的单选按钮？
【发布时间】：2010-09-05 14:34:17
【问题描述】：

以下代码在 IE 中运行良好，但在 FF 或 Safari 中则不行。我无法为我的生活找出原因。如果您选择“禁用 2 个单选按钮”选项，则代码应该禁用单选按钮。如果您选择“启用两个单选按钮”选项，它应该启用单选按钮。这两个都有效...

但是，如果您不使用鼠标在 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&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>

【问题讨论】：

嗯，这适用于 IE10 和 FF：fiddle

标签： javascript html radio-button

【解决方案1】：

要让 FF 在使用键盘时模仿 IE 的行为，您可以在选择框上使用 keyup 事件。在您的示例中（我不喜欢以这种方式附加事件处理程序，但这是另一个主题），它会是这样的：

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

【讨论】：

【解决方案2】：

嗯，IE 有一个有点不标准的对象模型；你正在做的事情不应该工作，但你正在逃避它，因为 IE 对你很好。在 Firefox 和 Safari 中，代码中的 document.frm 计算结果为 undefined。

您需要在表单元素上使用 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 一样，也值得在您的书架上占有一席之地

【讨论】：

【解决方案3】：

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

【讨论】：