[英]How can I select a checkbox in a sibling div using JQuery selectors?
Using JQuery selectors, how can I select the checkbox contained in the sibling div and remove the disabled property?使用 JQuery 选择器,我如何 select 包含在兄弟 div 中的复选框并删除 disabled 属性? (in the example code below, I need the checkbox in the div with the class of
col-3
) I can't just put a class on the checkbox and use that because I have multiple occurrences where I have this same structure, so I need to do it dynamically based on the HTML layout. (在下面的示例代码中,我需要带有
col-3
的 class 的 div 中的复选框)我不能只在复选框上放置一个 class 并使用它,因为我有多次出现我具有相同结构的地方,所以我需要根据 HTML 布局动态进行。 I have tried a combination of selectors including next()
, closest()
and siblings()
but I can't seem to target the checkbox successfully.我尝试了包括
next()
、 closest()
和siblings()
在内的选择器组合,但我似乎无法成功定位复选框。
My HTML structure looks like this:我的 HTML 结构如下所示:
<div class = "col-6">
<label>
<input type="checkbox" />
</label>
</div>
<div class = "col-3">
<label>
<input type="checkbox" disabled="disabled" />
</label>
</div>
To get the containing div, use $(this).closest("div")
.要获取包含的 div,请使用
$(this).closest("div")
。 To get its siblings, call .siblings()
.要获取其兄弟姐妹,请调用
.siblings()
。 Then use .find()
to find the checkboxes that they contain.然后使用
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.