[英]Check the checkboxes between divs
I've a set of checkboxes in a form.我在表单中有一组复选框。 Like below,
像下面,
<div>
<label><input type="checkbox" id="main-dish-9">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-12">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-17">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-18">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="main-dish-12">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-11">Id 9</label>
</div>
<div>
<label><input type="checkbox" id="sub-dishes-cuisine-category-21">Id 9</label>
</div>
When a page loads, only the check boxes with the id main-dish
are enabled, others are read-only.当页面加载时,只有带有 id
main-dish
的复选框被启用,其他是只读的。 In this case when I click on the checkbox with an id starting with main-dish
, It should make all the checkboxes below it starting with the id sub-dishes
to be enabled.在这种情况下,当我单击带有以
main-dish
开头的 id 的复选框时,它应该使其下方的所有复选框以 id sub-dishes
开头。 If someone checked the main-dish
, then it also must select any checkbox with an id starting with sub-dishes
.如果有人选中了
main-dish
,那么它也必须选中任何以sub-dishes
dishs 开头的 id 复选框。
(jQuery)("input[type='checkbox'][id*='main-dish']", context).click(function () {
(jQuery)("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', true);
})
Use nextUntil()
which selects the next elements until it finds the one with the selector of main-dish
, this function takes as input a list of elements and selects all elements until the label with a id of main-dish-*
,from there we select the checkbox and we toggle the disabled property使用
nextUntil()
选择下一个元素,直到找到带有main-dish
选择器的元素,此函数将元素列表作为输入并选择所有元素,直到 ID 为main-dish-*
的标签,从那里我们选中复选框并切换禁用属性
$("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', true); $("input[type='checkbox'][id*='main-dish']").click(function() { var inputs = $(this).closest('label').nextUntil($("input[type='checkbox'][id*='main-dish']").closest('label')).find('input'); inputs.prop('disabled', !inputs.prop('disabled')); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label> <input type="checkbox" id="main-dish-9">Id 9</label> <label> <input type="checkbox" id="sub-dishes-cuisine-category-12">Id 9</label> <label> <input type="checkbox" id="sub-dishes-cuisine-category-17">Id 9</label> <label> <input type="checkbox" id="sub-dishes-cuisine-category-18">Id 9</label> <label> <input type="checkbox" id="main-dish-12">Id 9</label> <label> <input type="checkbox" id="sub-dishes-cuisine-category-11">Id 9</label> <label> <input type="checkbox" id="sub-dishes-cuisine-category-21">Id 9</label>
Demo with wrapped div带包装 div 的演示
$("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', true); $("input[type='checkbox'][id*='main-dish']").click(function() { var inputs = $(this).closest('.wrap-input').nextUntil($("input[type='checkbox'][id*='main-dish']").closest('.wrap-input')).find('input'); inputs.prop('disabled', !inputs.prop('disabled')); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap-input"> <label> <input type="checkbox" id="main-dish-9">Id 9</label> </div> <div class="wrap-input"> <label> <input type="checkbox" id="sub-dishes-cuisine-category-12">Id 9</label> </div> <div class="wrap-input"> <label> <input type="checkbox" id="sub-dishes-cuisine-category-17">Id 9</label> </div> <div class="wrap-input"> <label> <input type="checkbox" id="sub-dishes-cuisine-category-18">Id 9</label> </div> <div class="wrap-input"> <label> <input type="checkbox" id="main-dish-12">Id 9</label> </div> <div class="wrap-input"> <label> <input type="checkbox" id="sub-dishes-cuisine-category-11">Id 9</label> </div> <div class="wrap-input"> <label> <input type="checkbox" id="sub-dishes-cuisine-category-21">Id 9</label> </div>
通过使用true
您仍然禁用复选框,它应该设置为 false
(jQuery)("input[type='checkbox'][id*='sub-dishes-cuisine-category']").prop('disabled', false);
var selected = [];
$('#checkboxes input:checked').each(function() {
selected.push($(this).attr('name'));
});
I think simplier way to use class
selectors and wrapper.我认为使用
class
选择器和包装器的方法更简单。
Html:网址:
<div>
<label> <input type="checkbox" class="main-dish">Id 9 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 9.1 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 9.2 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 9.3 </label>
</div>
<div>
<label> <input type="checkbox" class="main-dish">Id 10 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 10.1 </label>
<label> <input type="checkbox" class="sub-dishes-cuisine" disabled="">Id 10.2 </label>
</div>
JavaScript JavaScript
$(document).ready(function() {
$(".main-dish").click(function() {
var $inp = $(this).parent().parent().find(">label>.sub-dishes-cuisine");
if ($inp.is("[disabled]")){
$inp.removeAttr('disabled');
} else {
$inp.attr('disabled', true);
}
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.