jquery - Closest selector affects more than one element -

i have asp.net application uses grid control 3 check box columns side-by-side. boxes in first column enabled; next 2 disabled. tried write jquery function enable adjoining check box in second column when user checks box in first column. here code:

<script type="text/javascript">         $(document).ready(function() {             $("[id$='firstcheckbox']").click(function() {                 var td = $("td", $(this).closest("tr"));                 if ($(this).is(":checked")) {                     $("input[type=checkbox]", td).prop("disabled", false);                 }                 else {                     $("input[type=checkbox]", td).prop("disabled", true).prop("checked", false);                     $(this).prop("disabled", false);                 }                 });         });     </script> 

this function works fine when have 2 checkbox columns. when add third column disabled checkboxes, function enables box in column well. thought closest selector selects 1 element seems selecting two. doing wrong?

instead of going way parent tr element, go closest td , next cell on using jquery next() method.

you can generalize changing code this:

<script type="text/javascript">     $(document).ready(function() {         $("#tableid").on('click', 'input:checkbox:not(:disabled)', function() {             var $nexttd = $(this).closest("td").next('td');             if (! $nexttd.length) { return; } // in last column             if ($(this).is(":checked")) {                 $("input[type=checkbox]", $nexttd).removeprop("disabled");             }             else {                 $("input[type=checkbox]", $nexttd)                     .prop("disabled", 'disabled')                     .removeprop("checked");                 $(this).removeprop("disabled");             }             });     }); </script>