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>

$(this).closest("label").next().find("input[type=checkbox]").prop("disabled", true);? — John R
– John R, Commented Jan 5, 2018 at 9:34
Are the checkboxes supposed to remain checked when disabled? — Mr Lister
– Mr Lister, Commented Jan 5, 2018 at 9:37

Rory McCrossan · Accepted Answer · 2018-01-05 09:34:55Z

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>

Carsten Løvbo Andersen · Accepted Answer · 2018-01-05 09:34:38Z

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>

Sanjay Kumar Singh · Accepted Answer · 2018-01-05 09:36:09Z

0

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>

answered Jan 5, 2018 at 9:36

Sanjay Kumar Singh

9474 silver badges9 bronze badges

2 Comments

Rory McCrossan Over a year ago

What about when a checkbox is unchecked?

Sanjay Kumar Singh Over a year ago

for this @RoryMcCrossan i have not handled it right now, it will remain disabled thanks for pointing this. I think for that case i need to add 'this.checked' in place of 'true' value

Vinod Bhavnani · Accepted Answer · 2018-01-05 09:40:34Z

0

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>

answered Jan 5, 2018 at 9:40

Vinod Bhavnani

2,2431 gold badge17 silver badges19 bronze badges

1 Comment

Gyandeep Sharma Over a year ago

Please give some explanation for better understanding.. Thanks

Lakindu Gunasekara · Accepted Answer · 2018-01-05 09:52:29Z

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

Please give some explanation for better understanding.. Thanks

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related