How to make elements select-able using jquery

Question

I want to select list items when user clicks on them. But i don't want to use jQuery ui selectable. Please update my codes so that elements(only li) on my website can be selected just like in windows explorer.

  <ol id="browse-files">
    <li class="browse-file row">
      <div class="span6 file-name-col">timesNew.zip</div>
      <div class="span2 file-type-col">ZIP file</div>
      <div class="span2 file-size-col">1.08MB</div>
      <div class="span2 file-uploaded-col">23//6/2013</div>
    </li>
    <li class="browse-file row">
      <div class="span6 file-name-col">Photos.zip</div>
      <div class="span2 file-type-col">ZIP file</div>
      <div class="span2 file-size-col">30.19MB</div>
      <div class="span2 file-uploaded-col">23//6/2013</div>
    </li>
    <li class="browse-file row">
      <div class="span6 file-name-col">Docs.zip</div>
      <div class="span2 file-type-col">ZIP file</div>
      <div class="span2 file-size-col">12.38MB</div>
      <div class="span2 file-uploaded-col">23//6/2013</div>
    </li>
  </ol>

Here is the css

ol#browse-files {
    margin: 0;
    padding: 0;
    list-style: none;
}
ol#browse-files li {
    line-height: 40px;
    border-bottom: solid 1px #dcdcdc;
}
ol#browse-files li:hover {
    background-color: #dff0d8;
}
ol#browse-files li.active {
    background-color: #468847;
    color: #fff;
}

And jQuery codes goes here

$(document).ready(function() {
   $('ol#browse-files li').click(function(e) {
      if(e.ctrlKey){                                 //Select multiple files with ctrl
          $(this).toggleClass('active')
      } 

      else if($(this).hasClass('active')){
      $(this).toggleClass('active');
      } 

      else {
      $('ol#browse-files li').removeClass('active');
      $(this).addClass('active');
      }
   });

   $('.container:not(ol li)').click(function(e) {     // It works well without this but i want to deselect when user click anywhere else.
      $('ol#browse-files li').removeClass('active');
  });
});

Answer 1

DEMO HERE

Use e.stopPropagation() to stop bubbling the click event upto the container;

$('ol#browse-files li').click(function (e) {
        e.stopPropagation();
        if (e.ctrlKey) { //Select multiple files with ctrl
            $(this).toggleClass('active');
        } else if ($(this).hasClass('active')) {
            $(this).toggleClass('active');
        } else {
            $('ol#browse-files li').removeClass('active');
            $(this).addClass('active');
        }
});

$(".container").not("ol li").click(function (e) { 
       $('ol#browse-files li').removeClass('active');
});

Now after selecting some li when you click on the container(the grey area), the selection will be removed as you desired