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
      }

これは良い例かもしれません。必要なものを取得するには、それをいじる必要があります。