html - 可排序列表到复选框列表 JQuery，代码更改最少

Question

目前我有一个带有文本的可排序元素列表：

如何将其更改为带有标签且代码更改最少的复选框列表？

当前代码：

<div class='left'>
<ul id="sortable">
    <li class="ui-state-highlight"></li>
    <li class="ui-state-highlight"></li>
    <li class="ui-state-highlight"></li>
</ul>
</div>

脚本

<script>
     $(function() {
         $( "#sortable" ).sortable({
           items: "li:not(.ui-state-highlight)",
           placeholder: "ui-state-highlight"
         });
         $( "#sortable" ).disableSelection();
     });
   </script>

Javascript

 var nodes = document.getElementById('sortable').getElementsByClassName('ui-state-highlight');  
      if (nodes.length > 0)
      {
        nodes[0].innerHTML = getSymbol();
        nodes[0].setAttribute("class", "ui-state-default");
      }

Answer 1

脚本

<script type="text/javascript">
    $(document).ready(function() {
        $('#btnSave').click(function() {
            addCheckbox($('#txtName').val());
        });
    });

function addCheckbox(name) {
       var container = $('#cblist');
       var inputs = container.find('input');
       var id = inputs.length+1;

       var html = '<input type="checkbox" class="keepSymbol" id="cb'+id+'" value="'+name+'" onclick="checkboxClick(this)" checked="true" /> <label for="cb'+id+'">'+name+'</label>';
       container.append($(html));
    }
    </script>

Javascript

 var nodes = document.getElementById('cblist').getElementsByClassName('keepSymbol');
      if (nodes.length > 0)
      {
        addCheckbox(getSymbol());
      }
      else
      {
        return; // no more space
      }

这可能是一个很好的例子，你必须使用它来获得你需要的东西。