Создание строки для редактирования на основе флажка в HTML

Question

У меня есть таблица в HTML. Содержимое этой таблицы заполняется динамически. В каждой строке таблицы есть текстовые поля и один флажок. Когда страница загружена, все текстовые поля в строках будут в состоянии только для чтения.

Теперь я хочу изменить состояние текстовых полей в определенной строке на редактируемые, если установлен флажок в этой строке. Кроме того, текстовые поля должны быть доступны только для чтения, если флажок снят.

Как я мог сделать это, используя Javascript? Пожалуйста, помогите мне.

Answer 1

Заявление об этом простым javascript было бы чистой болью.

Answer 2

Попробуйте этот фрагмент (предполагается, что у флажка есть класс с именем "checkbox"), если вы используете Jquery.

jQuery('tr.checkbox').click(function() {
   if (jQuery(this).is(":checked")) {
      jQuery('td', this).removeAttr('disabled');
   } else {
      jQuery('td', this).attr('disabled', '');
   }
});`

Answer 3

Если вы не возражаете против использования jQuery, вы можете сделать:

$('checkbox').click(function() {
  if ($(this).attr('checked')) {
    $(this).parents('tr').children('input[type="text"]').each().attr('readonly', 'readonly');
  } else {
    $(this).parents('tr').children('input[type="text"]').each().removeAttr('readonly');
  }
})

Или что-то в этом роде. Я должен был проверить это, чтобы быть уверенным.

Отредактировано, чтобы отразить комментарий Андреаса.

Answer 4

Возможно, вы можете начать с обработки события click флажка с помощью оператора if / else, чтобы проверить, установлен ли флажок на самом деле. Если это так, вы можете использовать строку, в которой находится флажок, чтобы найти все текстовые поля в разных ячейках и включить / отключить их.

Вы используете JQuery или простой Javascript?