使用jQuery拖动项目时取消选择的单选按钮

问题描述：

我正在使用jQuery UI sortables插件来允许重新排列某些列表项目。在每个列表项目内，我有几个单选按钮，可以启用或禁用项目。使用jQuery拖动项目时取消选择的单选按钮

当项目被拖动时，两个单选按钮都被取消选中，这看起来应该不会发生。这是正确的行为，如果不是，解决此问题的最佳方法是什么？

下面是一个代码示例演示这个问题：

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

只要一个列表项抓起鼠标，无论是单选按钮均取消选中。

如果这是一个错误，一个解决方法是在项目被移动时自动选择'enabled'单选按钮，所以关于如何实现这一点的任何建议也将是最受赞赏的。

更新：我已经在Windows XP x64上的FireFox 3，Internet Explorer 7，Opera 9.5和Safari 3.1.2中对此进行了测试，并且所有这些问题都会发生。

答

这是在Internet Explorer吗？已知IE在复制/移动时会丢失复选框和无线电的选择。

http://webbugtrack.blogspot.com/2007/11/bug-299-setattribute-checked-does-not.html

defaultChecked需要进行重新设置IE浏览器的行为

答

它可能不是正是你要寻找什么，但改变

$('#itemlist').sortable();

到

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

保持单选按钮选择。

试图在FF3，IE7和Chrome的工作原理相同。单选按钮被清除（FF和铬）或重置（IE7） – Serxipc 2008-11-17 08:30:14

答

更新：这适用于jQuery.ui 1.5.2。如果您正在使用1.6rc2，请尝试Ben Koehler解决方案。

似乎sortables插件克隆被移动的节点。如果我们使用$('#itemlist li').clone().appendTo("#itemlist");克隆节点，我们会看到类似的行为，因为现在有4个单选按钮具有相同的名称，而不是两个。

您可以重写sortables插件与helper选项一起使用的方式。试试这个：

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

我们正在创建一个没有单选按钮的新节点并将它附加到列表中。这个新节点将是动画的节点。
此代码在FF3和Chrome中正常工作，但IE7会将单选按钮重置为默认状态。

答

某种答案，单选按钮失去其地位的是这里 http://core.trac.wordpress.org/ticket/16972#comment:4

这一点很长的路要走左右，但只有我能找到重新方式做单选按钮被地方拖

答

我之后的状态有很多相同的问题，但我在这里找到了一个解决方案： http://fiddyp.co.uk/how-to-fix-radio-inputs-losing-focus-when-dragging-a-jquery-ui-sortable-div/这似乎允许我拖放表格行，单选按钮保持正确的位置。

// global script for commentluv premium settings pages 
// workaround for bug that causes radio inputs to lose settings when meta box is dragged. 
// http://core.trac.wordpress.org/ticket/16972 
jQuery(document).ready(function(){ 
    // listen for drag drop of metaboxes , bind mousedown to .hndle so it only fires when starting to drag 
    jQuery('.hndle').mousedown(function(){ 
     // set event listener for mouse up on the content .wrap and wait a tick to give the dragged div time to settle before firing the reclick function 
     jQuery('.wrap').mouseup(function(){store_radio(); setTimeout('reclick_radio();',50);}); 
    }) 
}); 
/** 
* stores object of all radio buttons that are checked for entire form 
*/ 
function store_radio(){ 
    var radioshack = {}; 
    jQuery('input[type="radio"]').each(function(){ 
     if(jQuery(this).is(':checked')){ 
      radioshack[jQuery(this).attr('name')] = jQuery(this).val(); 
     } 
     jQuery(document).data('radioshack',radioshack); 
    }); 
} 
/** 
* detect mouseup and restore all radio buttons that were checked 
*/ 
function reclick_radio(){ 
    // get object of checked radio button names and values 
    var radios = jQuery(document).data('radioshack'); 
    //step thru each object element and trigger a click on it's corresponding radio button 
    for(key in radios){ 
     jQuery('input[name="'+key+'"]').filter('[value="'+radios[key]+'"]').trigger('click'); 
    } 
    // unbind the event listener on .wrap (prevents clicks on inputs from triggering function) 
    jQuery('.wrap').unbind('mouseup'); 
}

答

兰迪，我找到了最好的解决办法是checked属性存储在另一个属性，然后，移动选中的财产返还无线电输入之后。我以更简单的方式做到了这一点，使用可排序的开始和停止参数，如下所示。

// First, create a function to store the properties. 

// Store the checked radio properties 
    function gravaSelecoes() { 
     $("tbody.linhasConf").find("input:radio").each(function() { 
     if ($(this).prop("checked")) 
      $(this).attr("data-checked", "true"); 
     else 
      $(this).attr("data-checked", "false"); 
     }); 
    } 

// Then, create a function that restore the properties 

// Restore the checked radio properties 
    function atualizaSelecoes() { 
     $("tbody.linhasConf").find("input:radio").each(function() { 
     if ($(this).attr("data-checked") == "true") 
      $(this).prop("checked", true); 
     else 
      $(this).prop("checked", false); 
     }); 
    } 

// And when declaring sortables, refer to those functions 

    $('tbody.linhasConf').sortable({ 
     start: gravaSelecoes, 
     stop: atualizaSelecoes 
    }).disableSelection();

罗德里戈

使用jQuery拖动项目时取消选择的单选按钮

相关推荐