7

我正在使用jQuery UI sortables插件来允许对某些列表项进行重新排序。在每个列表项中，我有几个单选按钮，可以启用或禁用该项目。

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

这是演示此问题的代码示例：

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

只要用鼠标抓住一个列表项，两个单选按钮就会被取消选择。

如果这是一个错误，一种解决方法是在移动项目时自动选择“启用”单选按钮，因此任何关于如何实现这一点的建议也将不胜感激。

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

4

6 回答 6

1

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

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

您可以使用 helper 选项覆盖 sortables 插件的工作方式。尝试这个：

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

我们正在创建一个没有单选按钮的新节点并将其附加到列表中。这个新节点将是动画节点。
此代码在 FF3 和 Chrome 中运行良好，但 IE7 不断将单选按钮重置为其默认状态。

于 2008-11-17T09:13:40.343 回答
1

它可能不是您正在寻找的，但正在改变

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

至

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

保留单选按钮选择。

于 2008-11-14T17:05:56.117 回答
0

单选按钮失去状态的某种答案在这里 http://core.trac.wordpress.org/ticket/16972#comment:4

这有点长的路要走，但只有这样我才能找到在被拖到某个地方后重新做单选按钮状态的方法

于 2011-07-23T13:48:49.330 回答
0

这是在 Internet Explorer 中吗？众所周知，IE 在复制/移动时会丢失对复选框和收音机的选择。

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

需要重置 defaultChecked 才能使 IE 正常运行

于 2008-11-12T21:10:50.467 回答
0

我遇到了很多同样的问题，但我在这里找到了解决方案：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');
}
于 2014-10-09T17:01:21.570 回答
0

作为 Randy，我发现的最佳解决方案是将选中的属性存储在另一个属性中，然后在移动后将选中的属性返回到无线电输入。我以一种更简单的方式做到了这一点，使用可排序的开始和停止参数，如下所示。

// 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();

罗德里戈

于 2016-12-01T22:44:34.763 回答