在UL、LI和Label内的Bootstrap下拉列表中获取选中复选框的id，然后根据是否选中它来设置其他复选框

Question

在另一个stackerflow答案中，我发现了如何在Bootstrap下拉列表中使用checkbox的输入标签在UL标签内的标签内的li标签内的复选框。其中一个复选框用于选择所有参数。选中时，需要取消选中并禁用其他复选框。如果取消选中"全部"复选框，则其他复选框将启用。我已经尝试了许多其他人问题的答案，但似乎无法禁用和取消选中其他复选框。对我来说，另一个选项是，当选中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>

''

Answer 1

据我所知，您的代码应该是这样的：

$(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>