Question

I have a few checkbox elements and I want to disable the next (or previous).

My code looks like this:

<td>
  <input type="checkbox" class="chkOk" />
</td>

<td>
  <input type="checkbox" class="chkNotOk" />
</td>

<!-- Futher checkboxes -->

I tried:

$(function () {
    $('input[type=checkbox]').bind("click", function () {
        $(this).next('input[type=checkbox]').attr("disabled");
    });
});

And also:

$(this).siblings('input[type=checkbox]').attr("disabled");

But it does not work. Please help.

Answer 1

You’ll have to go up to the parent td and find the next checkbox from there:

var n = $(this).parent().nextAll().has(":checkbox").first().find(":checkbox");

This gets the td using parent, then gets all the following siblings (nextAll) of that td, reduces the matched set to only those td elements which contain a checkbox (has) and then gets the first one (first) in the remaining set.

Note that disabled is a property, and you should be using prop to set it, not attr:

n.prop("disabled", true);

The problem you were having is because you are looking for siblings of the clicked checkbox, and in your example HTML they don’t have any siblings.