Question

I have a reservation form that lists classes, with radio buttons, for reserving a class. If the class is full, a waitlist checkbox appears on the row with the class’s radio button. In jQuery, if a full class radio button is clicked, I want jQuery to check the waitlist checkbox. The td class=”wailist” will be in every row, but the checkbox will only be in the HTML if the class is full.
My jQuery so far-

var $class_table = JQuery('table.courses');
$class_table.find('input.radio').click(function (event)
{
   //if this row has a td.waitlist with a checkbox in it then check that box
 });

Here is the HTML snippet:

<tr class="course_full">
<td class="course_select", colspan=2>
    <label>
        <input type="radio" name="course[1][1]"
                id="course_id_1_9"
               value="9"
                >
        Geometry 2                                              
    </label>
</td>                                       
<td class="credit_recovery"> 
    <label>
        <input type="checkbox" name="credit_recovery[1][9]"
                id="credit_recovery_id_1_9"
                >
    </label>
</td> 
<td class="waitlist">
        <label>
            <input type="checkbox" name="waitlist[1][9]"
                    id="waitlist_id_1_9"
                    >
        </label>
</td>

I’ve failed at every ‘this’ ‘closest’ ‘find’ etc. Maybe length needs to be involved?

Answer 1

Is the click event working? If it’s not, I’d suggest the :radio selector:

$class_table.find(":radio").click(function(event) {

If it is, then the next step is to locate your checkbox relative to the found radio. You can simply use parent as @Imdad suggested (or several calls to parent) or, alternatively, closest. Inside your callback:

$(this).closest('tr').find('.waitlist :checkbox').attr('checked', true);

It will locate the parent row (no matter how deeply nested your radio button is) and then search for a checkbox inside the column with class waitlist. The last call will only have any effect if the result of find is non-empty. Working example at jsFiddle

If you prefer to be explicit when navigating the structure, you can locate the correct column with 2 calls to parent and one to siblings, according to your HTML snippet:

$(this)
   .parent().parent().siblings('.waitlist')
   .find(':checkbox').attr('checked', true);

Working example here, should produce the same results as the first one.

(Note: cleaned up the answer, correct contents preserved)