Как активировать динамически созданное текстовое поле при выборе динамически созданного флажка с помощью JavaScript?

Оффтоп javascript
1

Я создал таблицу динамически с помощью JavaScript. Мне нужно сделать так, чтобы при выборе флажка активировалось соответствующее текстовое поле в той же строке.

Я пробовал такой код:

function toggleTextbox(checkbox) {
  var row = checkbox.closest('tr');
  var textbox = row.querySelector('input[type="text"]');
  textbox.disabled = !checkbox.checked;
}

Но это не работает. Получаю ошибку:

Uncaught TypeError: Cannot read property ‘disabled’ of null

Как правильно связать флажки и текстовые поля в динамически созданной таблице? Буду благодарен за помощь!

2

Ошибка может быть из-за асинхронности. Попробуй использовать делегирование событий на родительский элемент таблицы:

document.querySelector(‘table’).addEventListener(‘change’, function(e) {
if (e.target.type === ‘checkbox’) {
var row = e.target.closest(‘tr’);
var textbox = row.querySelector(‘input[type=“text”]’);
if (textbox) textbox.disabled = !e.target.checked;
}
});

Так обработчик будет работать для всех чекбоксов, даже добавленных динамически. Проверь, может поможет.

3

привет! я тоже сталкивался с подобной проблемой. судя по ошибке, похоже что textbox не находится. попробуй использовать метод getElementsByTagName вместо querySelector. например так:

var textbox = row.getElementsByTagName(‘input’)[1];

это должно найти второй input в строке (предполагая что первый - чекбокс).

еще совет - добавь проверку на null перед изменением disabled:

if (textbox) {
textbox.disabled = !checkbox.checked;
}

так избежишь ошибки, если вдруг поле не найдется. удачи с реализацией!

4

Проблема скорее всего в том, что ты пытаешься получить элементы до того, как они полностью отрендерились в DOM. Попробуй обернуть свой код в setTimeout с небольшой задержкой:

setTimeout(() => {
const checkboxes = document.querySelectorAll(‘input[type=“checkbox”]’);
checkboxes.forEach(cb => {
cb.addEventListener(‘change’, () => toggleTextbox(cb));
});
}, 100);

Это даст время браузеру для рендеринга. Также можешь использовать MutationObserver для отслеживания изменений в DOM. Так будет надежнее работать с динамическим контентом.