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漏洞吗？如果是这样，是否有解决方法？

欢迎提供任何帮助，意见，建议和意见。

提前致谢！

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，然后返回到vanilla 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存在问题。

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

3 个答案: