Enable input when clicking the button inside the same row of a table

2

In the above table row I have two disabled inputs in columns vlcontrato and valor . I would like that when I click the alterar button these two inputs are enabled so that I can edit them.

Since they are on the same line I tried to use the siblings method but I only succeeded if the alterar button was within the same td as the input, but the button has to be in a td independent as in the image above!

How do I proceed to get this operation?!

$('tr td .btn_alt').click(function(){   
    $(this).siblings('input[name=vlcontrato]').attr('readonly', false);
    $(this).siblings('input[name=vlcontrato]').focus(); 
});
    
asked by anonymous 02.05.2014 / 13:09

1 answer

4

Search for the hierarchical element that is common to the elements you are looking for. It is probably the <tr> .

So you can use the .closest() to move up the DOM and find this "parent", the closest <tr> , and then back down the DOM with .find() to find the element you are looking for:

$(this).closest('tr').find('input[name="vlcontrato"]').attr('readonly', false);

If you want to enable both inputs, then you can simplify and use:

$('tr td .btn_alt').click(function () {
    $(this).closest('tr').find('input').attr('readonly', false);
});

jsFiddle: link

jQuery documentation:

.closest ()

  

Go up to the DOM and check each element for the indicated selector, including itself.

.find ()

  

Returns the descendants of each element passing in the selector filter.

    
02.05.2014 / 13:15