title: sortable list to checkbox list JQuery with minimal code change
body: <p>Currently i have a list of sortable elements with a text:</p>
  
  <p><img src="https://i.stack.imgur.com/tKdug.jpg" alt="Current look and feel"></p>
  
  <p>How can i change it to a list of checkboxes with labels with the least code change?</p>
  
  <p><img src="https://i.stack.imgur.com/0jZd3.jpg" alt="Ideal look and feel"></p>
  
  <p><strong>Current Code:</strong></p>
  
  <pre><code>&lt;div class='left'&gt;
  &lt;ul id="sortable"&gt;
      &lt;li class="ui-state-highlight"&gt;&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;&lt;/li&gt;
      &lt;li class="ui-state-highlight"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>&lt;script&gt;
       $(function() {
           $( "#sortable" ).sortable({
             items: "li:not(.ui-state-highlight)",
             placeholder: "ui-state-highlight"
           });
           $( "#sortable" ).disableSelection();
       });
     &lt;/script&gt;
  </code></pre>
  
  <p>Javascript </p>
  
  <pre><code> var nodes = document.getElementById('sortable').getElementsByClassName('ui-state-highlight');  
        if (nodes.length &gt; 0)
        {
          nodes[0].innerHTML = getSymbol();
          nodes[0].setAttribute("class", "ui-state-default");
        }
  </code></pre>