Disable/enable next checkbox based on previous checkbox selection - jQuery

Question

I want to disable the next checkbox if I select the previous one, it doesn't matter which one is selected only next should disable when previous checkbox is clicked but unfortunately can't get it working

Following is the code:

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

Try this code snippet. Once a checkbox is checked, below checkbox will be disabled. And if unchecked, it will be enabled.

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

Explaination .checkboxes will be refering the class checkboxes in the html. .bind means the checkbox is making a connection with a mouse click. That function is mentioned in the nested function.

In nested function, when button is clicked (parent), go to the next checkbox, then .prop will disable the next checkbox it finds.

Refer this basic https://www.w3schools.com/jquery/html_prop.asp

Answer 2

Please check the answer below:

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

Please check this updated code, All you have to add this piece of code within click event

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

The issue is because the checkboxes are not siblings as they are contained within label elements. This means that next() alone will not find the required element.

To fix this you need to get the parent label, go to the next() label, then find() the checkbox within that. Also note that you can use a single call to prop() by providing the checked state of the current checkbox. Try this:

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

Change $(this).next() to $(this).parent().next().find("input:checkbox")

Because your input doesn't have a sibling, but its parent(label) does siblings.

Demo

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