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

时间:2018-01-05 09:30:53

标签: javascript jquery html checkbox

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

以下是代码:



$(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>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分: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>

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

请检查以下答案:

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