Radio Button Onclick Event Requires Two Clicks to Fire on Firefox

[tyhand]

Hey all,

Hoping someone has a solution to this weirdness on Firefox 3.

I basically have 3 radio buttons and 3 text input fields (see following code):

*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" /*

Now, every time I click on a specific Radio Button, the text input elements for the other two buttons should get cleared and also become disabled (see following code).

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

Also, when the page is initially loaded, the text2 and text3 input fields are disabled via javascript as the text1 field is checked by default:

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

The problem I'm having is that it requires 2 (two) clicks to get this to work on Firefox. On Internet Explorer, it works as expected.

So, when clicking on a radio button the first time - nothing happens. When clicking on it a second time, that's when the Onclick Event is triggered.

NOTE: I'm using JQuery for this, but have also used straight Javascript to no avail.

You can simply copy and paste my code on an editor and open the page with Firefox to see issue firsthand.

Has anybody else encountered this? Is it some sort of Firefox bug? If so, is there a work-around?

Any and all help, comments, suggestions, and input are welcome.

Thanks in advance!

- Tyhand