One of my users reported an issue with IE9 and checkboxes that would appear checked on screen, but would clear on a postback from validation.

I'm a jquery novice at best. I am using jquery to change a Sharepoint (2007) checkbox formfield from a vertial layout to a horiztal layout. My code below:

<script>

$(document).ready(function(){

$("#CompSpecials").each(function() {

var radios = '<tr>';

$(this).find("tr").each(function(i) {

if(i == 5) radios += "</tr><tr>";

radios += $(this).html();

});

radios += "</tr>";

$(this).find("table:first").html(radios);

});

})

</script>

And the partial page source generated by SP:

><tr><td width="190px" valign="top" class="ms-formlabel"><H3 class="ms-standardheader"><nobr>TestBoxes<span class="ms-formvalidation"> *</span></nobr></H3></td><td id="CompSpecials" width="400px" valign="top" class="ms-formbody"><span dir="none"><table cellpadding="0" cellspacing="1">

<tr>

<td><span class="ms-RadioText" title="Red"><input id="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl00" type="checkbox" name="ctl00$PlaceHolderMain$g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23$ff2_1$ctl00$ctl00" checked="checked" /><label for="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl00">Red</label></span></td>

</tr><tr>

<td><span class="ms-RadioText" title="Green"><input id="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl01" type="checkbox" name="ctl00$PlaceHolderMain$g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23$ff2_1$ctl00$ctl01" /><label for="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl01">Green</label></span></td>

</tr><tr>

<td><span class="ms-RadioText" title="Yellow"><input id="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl02" type="checkbox" name="ctl00$PlaceHolderMain$g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23$ff2_1$ctl00$ctl02" /><label for="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl02">Yellow</label></span></td>

</tr><tr>

<td><span class="ms-RadioText" title="Black"><input id="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl03" type="checkbox" name="ctl00$PlaceHolderMain$g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23$ff2_1$ctl00$ctl03" /><label for="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl03">Black</label></span></td>

</tr><tr>

<td><span class="ms-RadioText" title="White"><input id="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl04" type="checkbox" name="ctl00$PlaceHolderMain$g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23$ff2_1$ctl00$ctl04" /><label for="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl04">White</label></span></td>

</tr><tr>

<td><span class="ms-RadioText" title="Blue"><input id="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl05" type="checkbox" name="ctl00$PlaceHolderMain$g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23$ff2_1$ctl00$ctl05" /><label for="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl05">Blue</label></span></td>

</tr><tr>

<td><span class="ms-RadioText" title="Purple"><input id="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl06" type="checkbox" name="ctl00$PlaceHolderMain$g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23$ff2_1$ctl00$ctl06" /><label for="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl06">Purple</label></span></td>

</tr><tr>

<td><span class="ms-RadioText" title="Pink"><input id="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl07" type="checkbox" name="ctl00$PlaceHolderMain$g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23$ff2_1$ctl00$ctl07" checked="checked" /><label for="ctl00_PlaceHolderMain_g_785b7e4a_d548_45c9_bda7_2b9bdf3c5c23_ff2_1_ctl00_ctl07">Pink</label></span></td>

</tr>

</table>

In both IE8 and IE9, the checkbox has a "value" attribute. After the replace of the inner html with the new html ($(this).find("table:first").html(radios); ), the "value" attribute in IE9 is set to null, instead of "on".

when the problem was reported to me, the page was using jquery jQuery 1.2.6, so I tried it with 1.6.4 same results. The code worked fine in IE6, IE7, IE8 and FF, even on my iPad. But not with IE9.

My work around at the moment is to loop back through and set the value to "on":

<script type="text/javascript">

$(document).ready(function(){

$("#CompSpecials").each(function() {

var radios = '<tr>';

$(this).find("tr").each(function(i) {

if(i == 5) radios += "</tr><tr>";

radios += $(this).html();

});

radios += "</tr>";

$(this).find("table:first").html(radios);

});

$("#CompSpecials").each(function() {

$(this).find("td").each(function(i) {

$(this).find(":checkbox").attr("value","on");

});

});

});

</script>

please feel free to tell me I'm a nut case and shouldn't be near a keyboard, it won't hurt my feelings. But I hope you you enough information to re-create the issue.