jquery - li 标签中选中的复选框必须单击两次才能取消选中

Question

有人可以帮我吗，如何在带有点击事件的 li 内停止选中复选框两次？我尝试添加 e.stopPropagation 函数，但没有成功。

<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;
});

Answer 1

您的选项代表选中复选框，并且它是空的(即使您的所有复选框都已选中)。
要解决此问题，您应该将选中的复选框的所有 li 父项的值放入 options 变量中。

您可以使用它来执行此操作:

options = $("input[type='checkbox']:checked").map(function() {
    return $(this).parent('li').data('value')
}).get();

它在您的代码中的外观如下:

var options = [];
options = $("input[type='checkbox']:checked").map(function() {
  return $(this).parent('li').data('value')
}).get();

$( '.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;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>