在 UL、LI 和 Label 内的 Bootstrap 下拉菜单中获取选中复选框的 id，然后根据是否选中其他复选框

Question

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>

'''

Answer 1

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>