Javascript 单选按钮Onclick事件需要两次单击才能在Firefox上启动/执行

希望有人能在Firefox3上解决这个奇怪的问题

我基本上有3个单选按钮和3个文本输入字段（参见以下代码）：

此外，当页面最初加载时，text2和text3输入字段将通过javascript禁用，因为默认情况下选中了text1字段：

document.getElementById("text2").disabled=true;
document.getElementById("text3").disabled=true;

我遇到的问题是需要点击两次才能在Firefox上运行。在Internet Explorer上，它按预期工作

因此，当第一次单击单选按钮时，什么也没有发生。当再次单击它时，即触发Onclick事件

注意：我使用JQuery来实现这一点，但也使用了纯Javascript，但没有任何效果

您只需将我的代码复制并粘贴到编辑器上，然后使用Firefox打开页面即可直接查看问题

还有其他人遇到过这种情况吗？这是某种Firefox bug吗？如果是，是否有解决办法

欢迎您提供任何帮助、意见、建议和意见

---

提前谢谢

您开始使用jQuery，然后返回到vanilla JavaScript。。。但是您键入的getElementById（）函数错误

如果你有jQuery，我会坚持使用它，它也会用这个特殊的方法避免IE bug

更干净的HTML

<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked"/>
<input type="text" name="text1" id="text1"/>

<input type="radio" name="group1" id="custom" value="custom_img"/>
<input type="text" name="text2" id="text2"/>

<input type="radio" name="group1" id="vector" value="vector_img"/>
<input type="text" name="text3" id="text3"/>

您可以尝试使用事件处理程序。我认为这样会更好

---

编辑：

.change（）

事件和IE存在问题。

由于您使用jQuery为单选按钮单击分配事件处理程序，因此可以删除

onClick

属性

这应该适合您：

$(function() {
    $(":radio").click(function(event) {
        if (this.id == "preloaded") {
            $("#text1").removeAttr("disabled");
            $("#text2, #text3").val("").attr("disabled", true);
        } else if (this.id == "custom") {
            $("#text2").removeAttr("disabled");
            $("#text1, #text3").val("").attr("disabled", true);
        } else if (this.id == "vector") {
            $("#text3").removeAttr("disabled");
            $("#text1, #text2").val("").attr("disabled", true);
        }
    });
    $("#text2, #text3").val("").attr("disabled", true);
});

对示例进行编码。

---

旁注：既然您正在使用jQuery，那么几乎所有的dom交互都可以使用jQuery，因为混合使用这两者最终会带来一些麻烦。让jQuery隐藏浏览器中的不一致性

一时想不起来。。。jQuery是否通过IE在单选按钮上不触发

change

事件来修复IE bug，直到它们被

blur

ed之后？如果没有-这可能会带来新问题；-）@人渣-不确定。找到了大量关于“事件冒泡”和FF和IE行为不一致的文章，以及你们在网上提到的bug。阅读它，但它并没有解决问题。同样，解决方案只适用于原型库。@我不明白你在说什么，这真的值得否决吗？

<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked"/>
<input type="text" name="text1" id="text1"/>

<input type="radio" name="group1" id="custom" value="custom_img"/>
<input type="text" name="text2" id="text2"/>

<input type="radio" name="group1" id="vector" value="vector_img"/>
<input type="text" name="text3" id="text3"/>

$(document).ready(function(){
  //bind the click event to the radio buttons
  $(':radio').click(function(){
    var radioID = $(this).attr('id');
    if(radioID == 'preloaded'){
      $('#text1').removeAttr('disabled');
      $('#text2, #text3').val('').attr('disabled','disabled');
    } else if(radioID == 'custom'){
      $('#text2').removeAttr('disabled');
      $('#text1, #text3').val('').attr('disabled','disabled');
    } else if(radioID == 'vector'){
      $('#text3').removeAttr('disabled');
      $('#text1, #text2').val('').attr('disabled','disabled');
    }
  });
});

$(function() {
    $(":radio").click(function(event) {
        if (this.id == "preloaded") {
            $("#text1").removeAttr("disabled");
            $("#text2, #text3").val("").attr("disabled", true);
        } else if (this.id == "custom") {
            $("#text2").removeAttr("disabled");
            $("#text1, #text3").val("").attr("disabled", true);
        } else if (this.id == "vector") {
            $("#text3").removeAttr("disabled");
            $("#text1, #text2").val("").attr("disabled", true);
        }
    });
    $("#text2, #text3").val("").attr("disabled", true);
});