Mr. Spock Mr. Spock - 3 months ago 13
jQuery Question

How do I find an specific textbox in the same row of a HTML table using jQuery?

I was hoping someone could help me here. It seems like it should be easy but I have not been able to find a solution.

I have a table that looks like this:

enter image description here

I've attached a a javascript function to the

onclick
event handler of the
CheckBox
controls on the far left. Here is my javascript:

// Toggle row colors when a "N/A" checkbox is clicked.
function handleNAClick(cb) {
if ($(cb).parent().parent().hasClass('silver')) {
$(cb).parent().parent().removeClass('silver').addClass('white');
}
else {
$(cb).parent().parent().removeClass('white').addClass('silver');
}
}


This function toggles the row color when the
CheckBox
is clicked.

What I want to be able to do is also enable/disable the
TextBox
at the far right of the row if the
CheckBox
is clicked.

This table is dynamically generated and I don't know the ID of the controls ahead of time.

As you can see, I can already get a handle to the table row and change the color, but for some reason I can't figure out how to get a handle to the
TextBox
on that row.

From my research this should work for enabling the textbox in jQuery, but it doesn't:

$(cb).parent().parent().find('input').removeAttr('disabled');


I can't even change the text in the
TextBox
either:

$(cb).parent().parent().find('input').val('hotdog');


Seems like it should be simple so I'm inclined to think I'm "fat-fingering" it somehow.

Does anyone know of a better way to do what I want? What am I messing up?

Thank you!

Answer

Seems like you are using <textarea> instead of <input>, if this is the case the following will work:

$(cb).parents('tr:first').find('textarea').prop('disabled', false);

Since you want to modify the property of an element it has to be done via .prop() method, removing the attribute will no do anything.