Skip to main content

Bug Tracker

Side navigation

#10447 closed bug (invalid)

Opened October 07, 2011 04:17AM UTC

Closed October 07, 2011 01:59PM UTC

Last modified March 14, 2012 07:10AM UTC

IE9 checkboxes are cleared by .html(value)

Reported by: simmonsm@woh.rr.com Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.6.4
Keywords: Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (4)

Changed October 07, 2011 01:59PM UTC by dmethvin comment:1

resolution: → invalid
status: newclosed

Please ask for help on the forum. http://forum.jquery.com

Changed December 05, 2011 02:10PM UTC by codechef comment:2

I am Facing exactly same issue now,

I am not sure why this is closed as invalid, with out giving more information

Changed December 17, 2011 03:54PM UTC by christian.arth@googlemail.com comment:3

Same issue here.

Bei replacing html of form-element with ajax-driven data

(form with checked="checked" radiobuttons) the elements where not detected as checked when selecting it again with serializeArray()

Changed December 17, 2011 03:55PM UTC by christian.arth@googlemail.com comment:4

Replying to [comment:3 christian.arth@…]:

Same issue here. Bei replacing html of form-element with ajax-driven data (form with checked="checked" radiobuttons) the elements where not detected as checked when selecting it again with serializeArray()

-> WinXP with IE9

It works perfectly with Chrome, FF8