單選按鈕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的問題。