问题描述
在另一个 stackoverflow 答案中,我发现了如何使用 UL 标签内的 li 标签内的标签标签内的 checkBox 输入标签在 Bootstrap 下拉列表中设置复选框。复选框之一是选择所有参数。选中时,其他复选框需要取消选中和禁用。当 ALL 复选框未选中时,其他复选框被启用。 我已经尝试了很多其他人问题的答案,但似乎无法禁用和取消选中其他复选框。对我来说另一个选项是,当检查所有复选框时,要检查所有其他框,并且在未选中时,请取消选中所有其他框。 任何帮助是极大的赞赏。 这是我试过的代码:
'''
Javascript
$(document).ready(function(){
$(".checkBox-menu").on("change","input[type='checkBox']",function() {
$(this).closest("li").toggleClass("active",this.checked);
var value = $(this).parent().find("label :checkBox").val();
var val1 = $(this).find(":checkBox").val();
var val2 = $(this).find("label").find('input[type=checkBox]').val();
var val3 = $(this).find("label").find('input[type=checkBox]').prop('checked',checked);
var val4 = $(this).find("label").find('input[type=checkBox]').id;
var val5 = $(this).find('input[type=checkBox]').id;
var val6 = $(this).id;
console.log(value)
console.log(val1)
console.log(val2)
//if (val4 = "allBox"){
//if (val3){
if (val6 = "allBox") {
document.getElementById("windBox").disabled = true;
document.getElementById("windBox").checked = false;
document.getElementById("visBox").disabled = true;
document.getElementById("cloudBox").disabled = true;
document.getElementById("pwBox").disabled = true;
document.getElementById("tempBox").disabled = true;
document.getElementById("dewBox").disabled = true;
document.getElementById("altBox").disabled = true;
document.getElementById("slpBox").disabled = true;
document.getElementById("precipBox").disabled = true;
} else{
document.getElementById("windBox").disabled = false;
document.getElementById("visBox").disabled = false;
document.getElementById("cloudBox").disabled = false;
document.getElementById("pwBox").disabled = false;
document.getElementById("tempBox").disabled = false;
document.getElementById("dewBox").disabled = false;
document.getElementById("altBox").disabled = false;
document.getElementById("slpBox").disabled = false;
document.getElementById("precipBox").disabled = false;
}
});
$(document).on('click','.allow-focus',function (e) {
e.stopPropagation();
});
function set_Boxes(me) {
//all_checked = document.getElementById('allBox').checked
console.log("In set_Boxes")
all_id = me.id;
all_checked = me.val;
console.log(all_id)
console.log(all_checked)
//var val1 = e.find("label").find('input[type=checkBox]').prop('checked',checked);
//if($("#allBox").is(':checked')) {
//if($('#allBox').attr('checked')) {
//var val3 = $(".checkBox-menu").find("label").find('input[type=checkBox]').prop('checked',checked);
//if (document.getElementById('allBox').checked){
//if (val3){
if (all_checked) {
document.getElementById("windBox").disabled = true;
document.getElementById("windBox").checked = false;
document.getElementById("visBox").disabled = true;
document.getElementById("cloudBox").disabled = true;
document.getElementById("pwBox").disabled = true;
document.getElementById("tempBox").disabled = true;
document.getElementById("dewBox").disabled = true;
document.getElementById("altBox").disabled = true;
document.getElementById("slpBox").disabled = true;
document.getElementById("precipBox").disabled = true;
} else{
document.getElementById("windBox").disabled = true;
document.getElementById("visBox").disabled = false;
document.getElementById("cloudBox").disabled = false;
document.getElementById("pwBox").disabled = false;
document.getElementById("tempBox").disabled = false;
document.getElementById("dewBox").disabled = false;
document.getElementById("altBox").disabled = false;
document.getElementById("slpBox").disabled = false;
document.getElementById("precipBox").disabled = false;
}
};
});
HTML
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="true">Parameter Selection
<span class="caret"></span>
</button>
<ul class="dropdown-menu checkBox-menu allow-focus" id="Boxlist">
<li>
<label><input type="checkBox" name="windBox" id="windBox">Wind</label>
</li>
<li>
<label><input type="checkBox" name="visBox" id="visBox">Visibility</label>
</li>
<li>
<label><input type="checkBox" name="cloudBox" id="cloudBox">Clouds</label>
</li>
<li>
<label><input type="checkBox" name="pwBox" id="pwBox">Present Weather</label>
</li>
<li>
<label><input type="checkBox" name="tempBox" id="tempBox">Air Temperature</label>
</li>
<li>
<label><input type="checkBox" name="dewBox" id="dewBox">Dew Point</label>
</li>
<li>
<label><input type="checkBox" name="altBox" id="altBox">Altimeter</label>
</li>
<li>
<label><input type="checkBox" name="slpBox" id="slpBox">Sea-Level Pressure</label>
</li>
<li>
<label><input type="checkBox" name="precipBox" id="precipBox">Precip</label>
</li>
<li>
<label><input type="checkBox" name="allBox" id="allBox" class="all-Box" onclick="return
set_Boxes(this)">ALL</label>
</li>
</ul>
</div>
'''
解决方法
据我所知,你的代码应该是这样的:
$(document).ready(function() {
const $checkboxMenu = $(".checkbox-menu");
/* might have to do this inside the event listener depending on
*how many .checkbox-menu you have,this will work for the purpose of this demo.
*/
const $otherCheckboxes = $checkboxMenu.find(':checkbox').not('#allbox');
$checkboxMenu.on("change",":checkbox",function() {
$(this).closest("li").toggleClass("active",this.checked);
if (this.id === 'allbox') {
$otherCheckboxes
.prop('checked',this.checked)
.prop('disabled',!this.checked);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data- toggle="dropdown" aria-haspopup="true" aria-expanded="true">Parameter Selection
<span class="caret"></span>
</button>
<ul class="dropdown-menu checkbox-menu allow-focus" id="boxlist">
<li>
<label><input type="checkbox" name="windbox" id="windbox">Wind</label>
</li>
<li>
<label><input type="checkbox" name="visbox" id="visbox">Visibility</label>
</li>
<li>
<label><input type="checkbox" name="cloudbox" id="cloudbox">Clouds</label>
</li>
<li>
<label><input type="checkbox" name="pwbox" id="pwbox">Present Weather</label>
</li>
<li>
<label><input type="checkbox" name="tempbox" id="tempbox">Air Temperature</label>
</li>
<li>
<label><input type="checkbox" name="dewbox" id="dewbox">Dew Point</label>
</li>
<li>
<label><input type="checkbox" name="altbox" id="altbox">Altimeter</label>
</li>
<li>
<label><input type="checkbox" name="slpbox" id="slpbox">Sea-Level Pressure</label>
</li>
<li>
<label><input type="checkbox" name="precipbox" id="precipbox">Precip</label>
</li>
<li>
<label><input type="checkbox" name="allbox" id="allbox" class="all-box">ALL</label>
</li>
</ul>
</div>