I'm using the jQuery UI sortables plugin to allow re-ordering of some list items. Inside each list item, I've got a couple of radio buttons which allow the item to be enabled or disabled.
When the item is dragged, both radio buttons get deselected, which doesn't seem like it should be happening. Is this correct behavior, and if not, what is the best way to work around this?
Here is a code sample demonstrating this problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery Sortables Problem</title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="jquery-ui.min.js" type="text/javascript"></script>
<style type="text/css">
.items
{
margin-top: 30px;
margin-left: 0px;
padding-left: 25px;
cursor: move;
}
.items li
{
padding: 10px;
font-size: 15px;
border: 1px solid #666;
background: #eee;
width: 400px;
margin-bottom: 15px;
float: left;
clear:both;
}
</style>
</head>
<body>
<ol id="itemlist" class="items">
<li id="1" class="item">
Item 1
<input name="status_1" type="radio" value="1" checked="checked" />enabled
<input name="status_1" type="radio" value="0" />disabled
</li>
<li id="2" class="item">
Item 2
<input name="status_2" type="radio" value="1" checked="checked" />enabled
<input name="status_2" type="radio" value="0" />disabled
</li>
<li id="3" class="item">
Item 3
<input name="status_3" type="radio" value="1" checked="checked" />enabled
<input name="status_3" type="radio" value="0" />disabled
</li>
<li id="4" class="item">
Item 4
<input name="status_4" type="radio" value="1" checked="checked" />enabled
<input name="status_4" type="radio" value="0" />disabled
</li>
</ol>
<script type="text/javascript">
$('#itemlist').sortable();
</script>
</body>
</html>
As soon as a list item is grabbed with the mouse, both the radio buttons get deselected.
If this is a bug, one workaround would be to automatically select the 'enabled' radio button when the item is moved, so any advice on how to achieve this would also be most appreciated.
Update: I've tested this in FireFox 3, Internet Explorer 7, Opera 9.5, and Safari 3.1.2, all on Windows XP x64, and this issue occurs in all of them.