how to select all input elements in a different TD
I have an <table>
created dinamically at runtime. This table has three columns:
- in the first
TD
there is always a<input type="checkbox">
element - the second
TD
is not important - in the third
TD
there is always an HTML input element. This can be an<input>
,<select>
I need to enable/disable the input elements that are in the third TD
when I click on the checkbox that is on the first TD
I know how to bind an event handler on the checkbox but I dont know how to select "all the <input>
and <select>
elements that will be inside the same row but in the third TD
"
This is a sample markup that I have
...
<tr>
<td>
<input id="chkSelectField" type="checkbox" name="chkSelectField"
onclick="disableControl('chkSelectField');" />
</td>
<td valign="top"> </td>
<td>
<input name="control1" type="text" id="control1" />
<input name="control2" type="text" id="control2" />
<select name="control3" type="text" id="control3">...</select>
</td>
</tr>
...
Inside your click handler:
$(this).closest('tr').find('td:eq(2) :input')
I would do this:
$('td input:checkbox').click(function() {
var t = $(this);
var inputs = $(this).closest('tr').find('td:eq(2) :input');
if (t.is(':checked')) {
inputs.attr('disabled', 'disabled');
} else {
inputs.removeAttr('disabled');
}
});
Example - http://jsfiddle.net/R5Lck/1/
Inside the event handler for the checkbox, put this:
$(this).parent().next().next().find('input,select')
精彩评论