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. One of the checkboxes is to select ALL parameters. When checked, the other checkboxes need to be unchecked and disabled. When the ALL checkbox is unchecked, the other checkboxes are enabled. 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>
'''
Aucun commentaire:
Enregistrer un commentaire