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

Question

在另一个 Whosebug 答案中，我找到了如何在 Bootstrap 下拉列表中使用 checkbox 输入标签 inside label 标签 inside li 标签 in an UL 标签。复选框之一是 select 所有参数。选中后，其他复选框需要取消选中并禁用。当取消选中 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>

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

Get id of checked checkbox in Bootstrap dropdown inside UL, LI, and Label, then set others based on it being checked or not

javascript

checkbox

html-lists

drop-down-menu