单选按钮onclick事件需要两次点击消防/执行上的Firefox

Question

希望有人对火狐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" /> 

现在，每次我点击一个特定的单选按钮时，其他两个按钮的文本输入元素应该被清除并且被禁用（参见下面的代码）。

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

我遇到的问题是：

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; 
    } 
}); 
}); 
} 

而且，当最初加载页面，如文本1场是默认选中的文本2和文字3输入字段都可以通过禁用JavaScript它需要2次（两次）点击才能使其在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隐藏浏览器中的不一致。

Answer 2

你开始使用jQuery，然后返回到香草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"/> 

和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的问题。