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" ""&gt;
<html xmlns="" >
    <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">
       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;


<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 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 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 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

<script type="text/javascript">


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.


Is this in Internet Explorer? IE is known to lose the selection of checkboxes and radios when copied/moved.

defaultChecked needs to be reset for IE to behave

+1  A: 

It may not be exactly what you're looking for, but changing



$('#itemlist').sortable({placeholder: ".items li"});

keeps the radio button selections.

Ben Koehler
Tried in FF3, IE7 and Chrome and works the same. Radio buttons are cleared (FF and chrome) or reseted (IE7)
It looks like it depends on your version of jquery.ui. I get the same results as you when I use 1.5.2, but I get just the opposite with 1.6rc2 (radio buttons cleared in FF and chrome using helper and persist using placeholder.) IE doesn't seem to work either way for me either.
Ben Koehler
You are right. With 1.6rc2 the default is to copy the element innerHtml in the placeholder. Setting the placeholder option to any non empty string overrides this behaviour.

UPDATE: This applies for jQuery.ui 1.5.2. If you are using 1.6rc2 try Ben Koehler solution.

It seems that the sortables plugin clones the node being moved. If we clone the nodes using $('#itemlist li').clone().appendTo("#itemlist"); we'll see a similar behavior, because now there are 4 radio buttons with the same name, instead of two.

You can override the way the sortables plugin works with the helper option. Try this:

$('#itemlist').sortable({helper: function(){
    return $("<li>").css({border: "1px solid red", background: "transparent"}).appendTo("#itemlist")[0];

We are creating a new node without radio buttons and appending it to the list. This new node will be the one that is animated.
This code works fine in FF3 and Chrome, but IE7 keeps reseting the radio buttons to its default state.