Access all input/text boxes in td element

Question

I'm using a table that has a hyperlink with the wording of "Edit" in the last column. In the first two columns are two text boxes with their readonly values set to true.

When the user clicks on the "Edit" link I want to change the readonly property to false and the wording of the hyperlink to "Save".

After attaching a click function to the hyperlink, how do I access the two text boxes? My first thought was to check the .parent element for input and go from there, but that didn't work. I also tried looking for the closest td element and doing a .find on any input but I couldn't get that to work either (although I may be looping through the inputs incorrectly.

Here's what I have so far:

    $('.editException').click(function () {
        if ($(this).text() == 'Save') {

        } else {
            //Change text of hyperlink (this is working)
            $(this).text('Save');

            //My two attempts at making the text boxes non-readonly
            $(this).parent('input').attr('readonly', false);
            $(this).closest('td').find('input').each(function () {
                this.readOnly = false;
            });
      });

Answer 1

Try this:

$(this).closest('tr').find('input').attr('readonly', false);

You need to go all the way up to the TR , because the inputs are in different columns. You don't need .each() , because .attr() works on all the elements that are selected.