0

トップレベルのチェックボックスが1つチェックされているときに、トップレベルの親チェックボックスを無効にするにはどうすればよいですか?

基本的に、最上位のチェックボックスをラジオ ボタンのように動作させ、子を通常のチェックボックスのように動作させたいと考えています。

この場合、トップレベルのチェックボックスをラジオ ボタンに置​​き換えることはできません。

現在、私の実装では、親ボックスまたは子ボックスがチェックされているかどうかに関係なく、すべてのチェックボックスが無効になっています。


$('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>

Jクエリ:

$('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 に答える