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

Question

我想要禁用下一个复选框，如果我选择上一个复选框，那么下一个复选框选中哪个选项并不重要，单击上一个复选框时会禁用但不幸的是无法使其工作

以下是代码：

＆＃13;

＆＃13;

$(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);
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

因为您的输入没有兄弟，但其父（标签）是兄弟姐妹。

<强>演示

＆＃13;

＆＃13;

$(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);
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

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

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>释 .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>