如何启用禁用的单选按钮?
以下代码在IE中效果很好,但在FF或者Safari中效果不佳。我无法为自己的生活找出原因。如果选择"禁用2个单选按钮"选项,则该代码应禁用单选按钮。如果选择"同时启用两个单选按钮"选项,则应启用单选按钮。这些都起作用...
但是,如果我们不使用鼠标在两个选项("启用..."和"禁用...")之间移动,则单选按钮似乎不会被禁用或者正确启用,除非我们单击其他任何位置在页面上(而不是在单选按钮上)。
如果有人有时间/好奇/有帮助,请将下面的代码粘贴到html页面中,然后将其加载到浏览器中。它在IE中效果很好,但问题在Windows XP上的FF(在我的情况下为3)和Safari中表现出来。
<html> <head> <script language="javascript"> 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; } } } </script> </head> <body> <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> </body> </html>
解决方案
回答
嗯,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');
但是,如果我们想更多地了解正确的事情处理方法,那么我们可能想看看这本出色的书:Jeremy Keith编写的DOM脚本
同样,当我们讨论这个主题时,同一作者的Bulletproof Ajax也应该在书架上占有一席之地,就像JavaScript:Doug Crockford撰写的《 The Good Parts》一样
回答
为什么不抓住其中一个AJAX脚本库,它们抽象了许多跨浏览器DOM脚本的黑魔法,使生活变得轻松多了。
回答
若要使FF模仿使用键盘时IE的行为,可以在选择框上使用keyup事件。在示例中(我不喜欢这种方式添加事件处理程序,但这是另一个主题),就像这样:
<select name="user" id="selUser" onchange="javascript:SetLocationOptions()" onkeyup="javascript:SetLocationOptions()">