Checked checkbox in li tag must be clicked twice to uncheck

Could someone please help me, how to stop checkbox being checked twice when inside an li with a click event? I tried to add e.stopPropagation function, but it did not work.

<div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Obor
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-submenu"><a tabindex="-1" href="#">Automotive   </a>
            <ul class="dropdown-menu">
    <li class="small" data-value="option2" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Automobily   </li>
    <li class="small" data-value="option3" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Nákladní auta    </li>
    <li class="small" data-value="option4" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Autobusy </li>
    <li class="small" data-value="option5" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Prodej ojetých vozů  </li>
    <li class="small" data-value="option6" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Komponenty   </li>
    <li class="small" data-value="option7" tabIndex="-1"><input type="checkbox" checked/>&nbsp;Alternativní pohony  </li>
            </ul></li></ul></div>

Javascript:

var options = [];
$( '.dropdown-menu .small' ).on( 'click', function( event ) {
   var $target = $( event.currentTarget ),
       val = $target.attr( 'data-value' ),
       $inp = $target.find( 'input' ),
       idx;

   if ( ( idx = options.indexOf( val ) ) > -1 ) {
      options.splice( idx, 1 );
      setTimeout( function() { $inp.prop( 'checked', false ) }, 0);
   } else {
      options.push( val );
      setTimeout( function() { $inp.prop( 'checked', true ) }, 0);
   }
   $( event.target ).blur();

   console.log( options );
   return false;
});