li 标签中选中的复选框必须单击两次才能取消选中
Checked checkbox in li tag must be clicked twice to uncheck
有人可以帮助我吗,如何在带有点击事件的 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/> Automobily </li>
<li class="small" data-value="option3" tabIndex="-1"><input type="checkbox" checked/> Nákladní auta </li>
<li class="small" data-value="option4" tabIndex="-1"><input type="checkbox" checked/> Autobusy </li>
<li class="small" data-value="option5" tabIndex="-1"><input type="checkbox" checked/> Prodej ojetých vozů </li>
<li class="small" data-value="option6" tabIndex="-1"><input type="checkbox" checked/> Komponenty </li>
<li class="small" data-value="option7" tabIndex="-1"><input type="checkbox" checked/> 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;
});
您的 options
代表 checked
个复选框,它是空的(即使您的所有复选框都已选中)。
要解决此问题,您应该将选中复选框的所有 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/> Automobily </li>
<li class="small" data-value="option3" tabIndex="-1"><input type="checkbox" checked/> Nákladní auta </li>
<li class="small" data-value="option4" tabIndex="-1"><input type="checkbox" checked/> Autobusy </li>
<li class="small" data-value="option5" tabIndex="-1"><input type="checkbox" checked/> Prodej ojetých vozů </li>
<li class="small" data-value="option6" tabIndex="-1"><input type="checkbox" checked/> Komponenty </li>
<li class="small" data-value="option7" tabIndex="-1"><input type="checkbox" checked/> Alternativní pohony </li>
</ul>
</li>
</ul>
</div>
有人可以帮助我吗,如何在带有点击事件的 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/> Automobily </li>
<li class="small" data-value="option3" tabIndex="-1"><input type="checkbox" checked/> Nákladní auta </li>
<li class="small" data-value="option4" tabIndex="-1"><input type="checkbox" checked/> Autobusy </li>
<li class="small" data-value="option5" tabIndex="-1"><input type="checkbox" checked/> Prodej ojetých vozů </li>
<li class="small" data-value="option6" tabIndex="-1"><input type="checkbox" checked/> Komponenty </li>
<li class="small" data-value="option7" tabIndex="-1"><input type="checkbox" checked/> 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;
});
您的 options
代表 checked
个复选框,它是空的(即使您的所有复选框都已选中)。
要解决此问题,您应该将选中复选框的所有 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/> Automobily </li>
<li class="small" data-value="option3" tabIndex="-1"><input type="checkbox" checked/> Nákladní auta </li>
<li class="small" data-value="option4" tabIndex="-1"><input type="checkbox" checked/> Autobusy </li>
<li class="small" data-value="option5" tabIndex="-1"><input type="checkbox" checked/> Prodej ojetých vozů </li>
<li class="small" data-value="option6" tabIndex="-1"><input type="checkbox" checked/> Komponenty </li>
<li class="small" data-value="option7" tabIndex="-1"><input type="checkbox" checked/> Alternativní pohony </li>
</ul>
</li>
</ul>
</div>