Jquery: Select the next nested input

Question

I have the following code:

<td><input class="publish" id="publish_company_ids" name="publish_company_ids[]" type="checkbox" value="1" /></td>

<td><input class="discard" id="discard_company_ids" name="discard_company_ids[]" type="checkbox" value="1" /></td>

I'd like when I click the first checkbox, the second checkbox to become disabled. I am trying this jquery code:

$(".publish").click(function () { 
 $(this).parent().next("td > input[text='checkbox']").css("border","1px solid green");
});

I tried by changing css border but it doesn't work.

Answer 1

First, you have text instead of type in your selector.

Second, if that doesn't help, try this:

$(this).parent().next('td').children('input:checkbox').css('border','1px solid green');

Answer 2

If you want to allow users to select only one of the checkbox then you should radio button instead of checkbox.

Answer 3

Try:

$(".publish").click(function () { 
 $(this).parent().find("input.discard").css("border","1px solid green");
});

Or:

$(".publish").click(function () { 
 $(this).parent().children("input.discard").css("border","1px solid green");
});