0

当一个顶级复选框被选中时，如何禁用顶级父复选框？

基本上，我希望顶级复选框的行为类似于单选按钮，而子项的行为类似于普通复选框。

在这种情况下，我无法将顶级复选框换成单选按钮。

目前，我的实现禁用所有复选框，无论是否选中了父框或子框。


$('li > label > input[type="checkbox"]').click(function () {
    var parent_id = $(this).parent().parent("[data-id]").data("id");
    
    // problem area

    if (this.checked) {
        $("input:checkbox").each(function () {
            $(this).prop("checked", false);
        });
        $(this).prop("checked", true);
    }
    

    $('li > label > input[type="checkbox"]').each(function () {
        if ($(this).is(":checked")) {
            $(this).parent().parent().find("ul.children").show();
        } else {
            $(this).parent().parent().find("ul.children").hide();
            uncheckChildren(parent_id);
        }
    });
});

function uncheckChildren(parent_id) {
    $('[data-id="' + parent_id + '"]')
        .find("ul.children li label input")
        .prop("checked", false);
}


<div class="categorychecklist-holder">
  <ul class="acf-checkbox-list acf-bl">

    <li data-id="10">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="10">
        <span>Dine</span></label>

      <ul class="children acf-bl" style="display: none;">

        <li data-id="371">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="371">
            <span>Brunch</span></label>

        </li>

        <li data-id="370">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="370">
            <span>Casual</span></label>

        </li>
      </ul>
    </li>

    <li data-id="7">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="7">
        <span>Do</span></label>

      <ul class="children acf-bl" style="display: none;">

        <li data-id="372">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="372">
            <span>Gallery</span></label>

        </li>

        <li data-id="373">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="373">
            <span>Museum</span></label>

        </li>
      </ul>
    </li>

    <li data-id="6">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="6">
        <span>Shop</span></label>

    </li>

    <li data-id="13">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="13">
        <span>Stay</span></label>

    </li>
  </ul>
</div>

ul.children {
  display: none;
}
4

1 回答 1

0

请检查下面的代码。我很抱歉我之前的帖子。我犯了一个错误。我希望它可以按照你想要的方式工作。
HTML： 

    <li data-id="10">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="10" class="parent-check">
        <span>Dine</span></label>

      <ul class="children acf-bl" style="display: none;">

        <li data-id="371" >
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="371" class="childcheck">
            <span>Brunch</span></label>

        </li>

        <li data-id="370">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="370" class="childcheck">
            <span>Casual</span></label>

        </li>
      </ul>
    </li>

    <li data-id="7">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="7" class="parent-check">
        <span>Do</span></label>

      <ul class="children acf-bl" style="display: none;">

        <li data-id="372">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="372" class="childcheck">
            <span>Gallery</span></label>

        </li>

        <li data-id="373">
          <label>
            <input type="checkbox" name="acf[field_611a82974b81d][]" value="373" class="childcheck">
            <span>Museum</span></label>

        </li>
      </ul>
    </li>

    <li data-id="6">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="6">
        <span>Shop</span></label>

    </li>

    <li data-id="13">
      <label>
        <input type="checkbox" name="acf[field_611a82974b81d][]" value="13">
        <span>Stay</span></label>

    </li>
  </ul>
</div>

查询：

$('li > label > input[type="checkbox"]').click(function () {
    var parent_id = $(this).parent().parent("[data-id]").data("id");
    
    // problem area

    if (this.checked) {

      if($(this).hasClass("childcheck")){
      console.log("sdsd")
        $("input:checkbox").not(this).closest("li").hasClass("parent-check").prop("checked", false)
      }
      else {
      $("input:checkbox").each(function () {
            $(this).prop("checked", false);
        });
      }
        
        $(this).prop("checked", true);
    }
    

    $('li > label > input[type="checkbox"]').each(function () {
        if ($(this).is(":checked")) {
            $(this).parent().parent().find("ul.children").show();
        } else {
            $(this).parent().parent().find("ul.children").hide();
            uncheckChildren(parent_id);
        }
    }); 
});

function uncheckChildren(parent_id) {
/*      let childLength = $(this).closest("li").find(".childcheck").length;
                 if(childLength > 0) {
        
               }
            $('[data-id="' + parent_id + '"]').find("ul.children li label input").prop("checked", false); */
}

CSS：

ul.children {
  display: none;
}
于 2021-12-24T21:18:01.053 回答