根据先前的复选框选择禁用/启用下一个复选框-jQuery

Question

如果要选择上一个复选框，我想禁用下一个复选框，这与选择哪个复选框无关，仅当单击上一个复选框时，下一个应该禁用，但不幸的是它无法正常工作

以下是代码：

 $(function() { var next = $(".checkboxes").next().find(":checkbox"); //alert(next); $('.checkboxes input[type=checkbox]').bind("click", function() { if ($(this).is(':checked')) { $(this).next().prop("disabled", true); } else { $(this).next().prop("disabled", false); } }); }); 

 .checkboxes { float: left; width: 100%; margin-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check1">Option1</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check2">Option2</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check3">Option3</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check4">Option4</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check5">Option6</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check6">Option6</label> 

Answer 1

将$(this).next()更改$(this).next() $(this).parent().next().find("input:checkbox")

因为您的输入没有同级，但是其父级（标签）没有同级。

演示

 $(function() { var next = $(".checkboxes").next().find(":checkbox"); //alert(next); $('.checkboxes input[type=checkbox]').bind("click", function() { if ($(this).is(':checked')) { $(this).parent().next().find("input:checkbox").prop("disabled", true); } else { $(this).parent().next().find("input:checkbox").prop("disabled", false); } }); }); 

 .checkboxes { float: left; width: 100%; margin-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check1">Option1</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check2">Option2</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check3">Option3</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check4">Option4</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check5">Option6</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check6">Option6</label> 

Answer 2

问题是因为复选框不是兄弟姐妹，因为它们包含在label元素中。 这意味着单独的next()不会找到所需的元素。

要解决此问题，您需要获取父label ，转到next()标签，然后find()其中的复选框。 还要注意，您可以通过提供当前复选框的checked状态来使用对prop()的单个调用。 尝试这个：

 $(function() { $('.checkboxes input[type=checkbox]').bind("click", function() { $(this).parent().next().find(':checkbox').prop("disabled", this.checked); }); }); 

 .checkboxes { float: left; width: 100%; margin-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label class="checkboxes"> <input type="checkbox" name="radiocheck-checkDefault__Group" id="check1"> Option1 </label> <label class="checkboxes"> <input type="checkbox" name="radiocheck-checkDefault__Group" id="check2"> Option2 </label> <label class="checkboxes"> <input type="checkbox" name="radiocheck-checkDefault__Group" id="check3"> Option3 </label> <label class="checkboxes"> <input type="checkbox" name="radiocheck-checkDefault__Group" id="check4"> Option4 </label> <label class="checkboxes"> <input type="checkbox" name="radiocheck-checkDefault__Group" id="check5"> Option5 </label> <label class="checkboxes"> <input type="checkbox" name="radiocheck-checkDefault__Group" id="check6"> Option6 </label> 

Answer 3

请检查此更新的代码，您只需在click事件中添加这段代码

$(this).closest("label").next().find("input[type=checkbox]").prop("disabled", true);

 $(function() { $('.checkboxes input[type=checkbox]').bind("click", function() { $(this).closest("label").next().find("input[type=checkbox]").prop("disabled", true); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> .checkboxes { float: left; width: 100%; margin-bottom: 10px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check1">Option1</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check2">Option2</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check3">Option3</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check4">Option4</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check5">Option6</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check6">Option6</label> 

Answer 4

试试这个代码片段。 选中复选框后，下面的复选框将被禁用。 如果未选中，它将被启用。

 $(function() { $('.checkboxes input[type=checkbox]').bind("click", function() { $(this).parent().next().find(':checkbox').prop("disabled", this.checked); }); }); 

 .checkboxes { float: left; width: 100%; margin-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check1">Option1</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check2">Option2</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check3">Option3</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check4">Option4</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check5">Option6</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check6">Option6</label> 

说明 .checkboxes将引用html中的类复选框。 .bind表示该复选框通过单击鼠标建立连接。 嵌套函数中提到了该函数。

在嵌套功能中，当单击按钮（父按钮）时，转到下一个复选框，然后.prop将禁用它找到的下一个复选框。

请参阅此基本https://www.w3schools.com/jquery/html_prop.asp

Answer 5

请检查以下答案：

 $(function() { $('input[name="radiocheck-checkDefault__Group"]').click(function () { var n = $(this).parent().nextAll().has(":checkbox").first().find(":checkbox"); console.log(n.prop('disabled')); n.prop('disabled',!n.prop('disabled')); }); }); 

 .checkboxes { float: left; width: 100%; margin-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check1">Option1</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check2">Option2</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check3">Option3</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check4">Option4</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check5">Option6</label> <label class="checkboxes"><input type="checkbox" name="radiocheck-checkDefault__Group" id="check6">Option6</label>