单选按钮 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;

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

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

注意：我为此使用 JQuery，但也使用直接 Javascript 无济于事。

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

有没有其他人遇到过这种情况？它是某种 Firefox 错误吗？如果是这样，是否有解决方法？

欢迎任何和所有帮助、cmets、建议和输入。

提前致谢！

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 隐藏浏览器中的不一致。

Answer 2

您开始使用 jQuery，然后返回原版 JavaScript……但您输入错误的 getElementById() 函数。

如果你有 jQuery，我会坚持使用它，它也可以避免使用这种特殊方法的 IE 错误。

更简洁的 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"/>

还有 jQuery...

$(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');
    }
  });
});

Answer 3

您可以尝试.change() 事件处理程序。我认为这样会更好。

编辑：.change() 事件和 IE 存在问题。