[jQuery] jQuery enable/disable problem with IE 6 and 7
Hi,
I'm having a few problems getting my jQuery code to work in internet
explorer 6 and 7. The best way I can describe it is: there are several
text fields on my webpage and each should be enabled/disabled based
upon the radio button selected at the top of the page. The code I have
written works fine in firefox, opera and safari.
The problem with IE is that it requires 2 clicks for the jQuery to
take effect (ie. user clicks the radio button, nothing happens, but
then they click another part of the screen and the changes take
effect). Also, when the jQuery IS invoked, the incorrect text fields
are enabled/disabled.
I tried a much simpler example to try to find the problem but
encounter similar issues. Here is the code for that:
/********JQUERY************/
$(document).ready(function() {
$("input[@name=choice]").change(function() {
var thisValue = $(this).val();
switch (thisValue) {
case "one":
$("select#cars").attr("disabled","disabled");
$("select#animals").attr("disabled","");
break;
case "two":
$("select#animals").attr("disabled","disabled");
$("select#animals").attr("value","dog");
$("select#cars").attr("disabled","");
break;
case "three":
$("select#cars").attr("disabled","");
$("select#animals").attr("disabled","");
break;
}
});
});
/******HTML***********/
<html>
<head>
//get jQuery code
</head>
<body>
<form>
<input type="radio" name="choice" value="one" class="second"
id="firstChoice">Option One
<input type="radio" name="choice" value="two" class="second"
id="secondChoice">Option Two
<input type="radio" name="choice" value="three" class="second"
id="thirdChoice">Option Three
<BR><BR>
<select id="cars" name="cars" class="second">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<select id="animals" name="animals" class="second">
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="sheep">sheep</option>
<option value="cow">cow</option>
</select>
</form>
</div>
</body>
</html>
Any help would be greatly appreciated, thanks.