[英]Get id of checked checkbox in Bootstrap dropdown inside UL, LI, and Label, then set others based on it being checked or not
In another stackoverflow answer, I found how to have check boxes in a Bootstrap dropdown using an input tag of checkbox inside a label tag inside a li tag inside a UL tag.在另一个stackoverflow答案中,我发现了如何使用UL标签内的li标签内的label标签内的复选框输入标签在Bootstrap下拉列表中设置复选框。 One of the checkboxes is to select ALL parameters.
复选框之一是 select ALL 参数。 When checked, the other checkboxes need to be unchecked and disabled.
选中后,其他复选框需要取消选中并禁用。 When the ALL checkbox is unchecked, the other checkboxes are enabled.
当 ALL 复选框未选中时,将启用其他复选框。 I have tried many answers to other people's questions but cannot seem to get the other checkboxes disabled and unchecked.
我已经尝试了很多其他人的问题的答案,但似乎无法禁用和取消选中其他复选框。 Another option for me is that when the ALL checkbox is checked, to check all the other boxes and when it is unchecked, to uncheck all the other boxes.
对我来说,另一个选择是,当检查了所有复选框时,检查所有其他框以及未选中时,请取消选中所有其他框。 Any help is greatly appreciated.
任何帮助是极大的赞赏。 Here is the code I have tried:
这是我尝试过的代码:
''' '''
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>
''' '''
As far as I understand your code should be something like this:据我了解,您的代码应该是这样的:
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.