CODEWITHSUNDEEP
jquery
Tommy Arnold
Tommy Arnold

Reputation: 3389

set attr of inputs on this row

I have a table with 3 rows 

 <table id="table1">
 <tr>
 <td><input type="text" disabled="disabled" value="200"/></td>
 <td><input type="text" disabled="disabled" value="300"/></td>
 <td><input type="checkbox"/></td>
 <tr>
 <tr>
 <td><input type="text" disabled="disabled" value="400"/></td>
 <td><input type="text" disabled="disabled" value="600"/></td>
 <td><input type="checkbox"/></td>
 <tr>
 </table>

Jquery when someone clicks the checkbox i would like to change the attr of the 2 inputs on that row and make them editable but if someone clicks the checkbox on another row the previously enabled input must be disabled and the new one enabled

This is what i thought but it doesnt work

   $("#table1 :checkbox").click(function(){
   $(this).parent(":input[type='text']").attr('disabled',false);

   });

Upvotes: 0

Views: 4123

Answers (3)

lonesomeday
lonesomeday

Reputation: 237845

parent(":input[type='text']") says "give me the parent node if it is an input element with the type text. This obviously isn't what you want! You need to use find:

$("#table1 :checkbox").click(function(){
    $(this)
       .closest('tr') // find the parent row
           .find(":input[type='text']") // find text elements in that row
               .attr('disabled',false) // enable them
           .end() // go back to the row
           .siblings() // get its siblings
               .find(":input[type='text']") // find text elements in those rows
                   .attr('disabled',true); // disable them
});

Upvotes: 1

Marcus Whybrow
Marcus Whybrow

Reputation: 19998

You can watch watch for changes to all of your checkboxes, which will fire on both selections and deselections. If selected we can set the disabled attribute to an empty string in order to "enable", and if deselected to "disabled" in order to re-disable the inputs:

$('#table1 :checkbox').change(function() {
    $(this).closest('tr').find('input[type="text"]').attr('disabled',
        this.checked ? '' : 'disabled'
    );
});

DEMO: http://jsfiddle.net/marcuswhybrow/8WtvK/

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 185913

$('#table1 input:checkbox').click(function() {
    var row = $(this).closest('tr');

    row.find('input:text').attr('disabled', false);
    row.siblings().find('input:text').attr('disabled', true);
});

Live demo: http://jsfiddle.net/buAmd/

I used radio boxes in the demo since both boxes cannot be checked at the same time.

Upvotes: 0

Related Questions