Установить атрибут входов в этой строке

У меня есть таблица с 3 рядами

 <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, когда кто-то нажимает на флажок, я хотел бы изменить attr 2 входов в этой строке и сделать их редактируемыми, но если кто-то нажимает флажок на другой строке, ранее активированный вход должен быть отключен, а новый включен

Это то, что я думал, но это не работает

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

   });

3 ответа

Решение

parent(":input[type='text']") говорит "дай мне родительский узел, если это элемент ввода с типом text, Это явно не то, что вы хотите! Вам нужно использовать 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
});

Вы можете наблюдать за изменениями во всех ваших флажках, которые будут срабатывать как при выборе, так и при отмене выбора. Если выбрано, мы можем установить disabled приписать пустую строку, чтобы "включить", и если отменить выбор для "отключен" для повторного отключения входов:

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

ДЕМО: http://jsfiddle.net/marcuswhybrow/8WtvK/

$('#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);
});

Живая демоверсия: http://jsfiddle.net/buAmd/

Я использовал радио-боксы в демоверсии, так как оба блока не могут быть отмечены одновременно.

Другие вопросы по тегам