li標籤中的複選框必須點擊兩次以取消選中

Question

有人可以幫助我，如何停止點擊事件時在裏面點選複選框兩次？我試圖添加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

你options代表checked複選框，它是空的（即使你所有的複選框被檢查）。
爲了解決這個問題，你應該在options變量裏面加入所有選中的複選框的所有li父母的值。

您可以使用該這樣做：

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>