如何使用 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>