javascript - 单选按钮 Onclick 事件需要在 Firefox 上单击两次才能触发/执行

Question

希望有人能够解决 Firefox 3 上的这个奇怪问题。

我基本上有 3 个单选按钮和 3 个文本输入字段(请参阅以下代码):

<input type="radio" name="group1" id="preloaded" value="preloaded_img" checked="checked" onclick="SetVals();" />
<input type="text" name="text1"  id="text1" />

<input type="radio" name="group1" id="custom" value="custom_img" onclick="SetVals();" />
<input type="text" name="text2"  id="text2" />

<input type="radio" name="group1" id="vector" value="vector_img" onclick="SetVals();" />
<input type="text" name="text3"  id="text3" />

现在，每次我单击特定的单选按钮时，其他两个按钮的文本输入元素都应该被清除并被禁用(请参阅以下代码)。

function SetVals() { // using JQuery + straight JS for this...
$(document).ready(function() {
 $(":radio").click(function(event) {

// use event.target to determine which radio button was clicked
   if (event.target.id=="preloaded") {
    document.getElementByID("text1").disabled=false;
    $("#text2").val("");
    $("#text3").val("");
    document.getElementById("text2").disabled=true;
    document.getElementById("text3").disabled=true;

   } else if (event.target.id=="custom") {
    document.getElementByID("text2").disabled=false;
    $("#text1").val("");
    $("#text3").val("");
    document.getElementById("text1").disabled=true;
    document.getElementById("text3").disabled=true;

   } else if (event.target.id=="vector") {
    document.getElementByID("text3").disabled=false;
    $("#text1").val("");
    $("#text2").val("");
    document.getElementById("text1").disabled=true;
    document.getElementById("text2").disabled=true;
   }
 });
});
}

此外，当页面首次加载时，text2 和 text3 输入字段将通过 JavaScript 禁用，因为默认情况下会选中 text1 字段:

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

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

因此，当第一次单击单选按钮时 - 没有任何反应。当第二次单击它时，就会触发 Onclick 事件。

注意:我为此使用了 JQuery，但也直接使用了 Javascript，但没有效果。

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

还有人遇到过这种情况吗？这是 Firefox 的某种错误吗？如果是这样，有解决方法吗？

欢迎任何及所有帮助、评论、建议和意见。

提前致谢!

Answer 1

由于您使用 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);
});

jsfiddle 上的代码示例.

旁注:既然你使用的是 jQuery，你也可以使用 jQuery 来进行几乎所有的 dom 交互，因为混合两者最终会导致一些痛苦。让 jQuery 隐藏浏览器中的不一致之处。