根据先前的复选框选择禁用/启用下一个复选框 - 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

问题是因为复选框不是兄弟，因为它们包含在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 2

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

因为你的输入没有兄弟姐妹，但它的 parent(label) 有兄弟姐妹。

演示

$(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 3

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

$(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() {
  $('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>

Answer 5

试试这个代码 sn-p。选中复选框后，将禁用下面的复选框。如果不选中，它将被启用。

$(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