如何使用 JQuery 選擇器在兄弟 div 中 select 復選框？

Question

使用 JQuery 選擇器，我如何 select 包含在兄弟 div 中的復選框並刪除 disabled 屬性？ （在下面的示例代碼中，我需要帶有col-3的 class 的 div 中的復選框）我不能只在復選框上放置一個 class 並使用它，因為我有多次出現我具有相同結構的地方，所以我需要根據 HTML 布局動態進行。 我嘗試了包括next() 、 closest()和siblings()在內的選擇器組合，但我似乎無法成功定位復選框。

我的 HTML 結構如下所示：

<div class = "col-6">
    <label>
        <input type="checkbox" />
    </label>
</div>

<div class = "col-3">
    <label>
        <input type="checkbox" disabled="disabled" />
    </label>
</div>

Answer 1

要獲取包含的 div，請使用$(this).closest("div") 。 要獲取其兄弟姐妹，請調用.siblings() 。 然后使用.find()查找它們包含的復選框。

 $(":checkbox").click(function() { $(this).closest("div").siblings().find(":checkbox").removeAttr("disabled"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-6"> <label> <input type="checkbox" /> </label> </div> <div class="col-3"> <label> <input type="checkbox" disabled="disabled" /> </label> </div>