Отключить поле ввода, когда флажок установлен (JQuery)

Question

У меня есть список флажков, и с каждым флажком есть поле ввода.Если я установлю флажок, поле ввода должно быть отключено.Пример:

Checkbox 1 - Input 1
Checkbox 2 - Input 2
Checkbox 3 - Input 3

Реальный код:

<table id="food" width="580px">
    <tr>
        <th colspan="5">Eten</th>
        <tr>
            <td><input type="checkbox" name="checkbox_1_1" value="" /></td>
            <input type="hidden" name="todo_1_1" value="7" />
            <td>Braadworst</td>
            <td>7</td>
            <td><input type="text" name="item_1_1" size="4" value="" /></td>
            <td></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkbox_1_2" value="" /></td>
            <input type="hidden" name="todo_1_2" value="5" />
            <td>Witte worst</td>
            <td>5</td>
            <td><input type="text" name="item_1_2" size="4" value="" /></td>
            <td></td>
        </tr>
    </tr>
</table>

Только поле ввода с тем же номером может быть отключено ...

Через Google я нашел: http://techchorus.net/disable-and-enable-input-elements-div-block-using-jquery

Пример работает отлично, но есть ли способ сделать это без предварительного определения имен?В моем случае невозможно узнать имена, поэтому их нужно определить при переключении флажка, нет?

Есть предложения?

Answer 1

если у вас есть "очень" простая структура

<input type="checkbox" name="" /><input type="text" name="" />
<input type="checkbox" name="" /><input type="text" name="" />
<input type="checkbox" name="" /><input type="text" name="" />
<input type="checkbox" name="" /><input type="text" name="" />
<input type="checkbox" name="" /><input type="text" name="" />​

вы можете

$(':checkbox').change(function(){
  $(this).next().attr('disabled',!this.checked);
})​;

вот демо

но тогда я знаю, что у вас нет "очень" простой структуры, так что прочитайте следующее и получите идею сверху ...

1. обход
2. селекторы

Если вы можете предоставить структуру вашего HTML, гораздо лучше ...

Answer 2

Сначала несколько исправлений в разметке: этот скрытый ввод должен находиться внутри <td>, а строке заголовка требуется закрывающий </tr>, затем вы можете сделать это:

​$('#food').delegate(':checkbox', 'change', function(​​​​​​​​​​​​​​​​​) {
    $(this).closest('tr').find('input:text').attr('disabled', !this.checked);
});
$(':checkbox').change(); //set state initially

Вы можете увидеть демо здесь , мы используем .closest(), чтобы подняться до <tr>, затем найти входные данные [type=text], используя .find() и :text.