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

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

在另一个 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>