基于 HTML 中的复选框使行可编辑

Question

我有一个 HTML 表格。此表的内容是动态填充的。表格的每一行都有文本框和一个复选框。加载页面时，行中的所有文本框都将处于只读状态。

现在，如果选中该行中的复选框，我想将特定行中的文本框的状态更改为可编辑。此外，如果取消选中该复选框，则应将文本框设为只读。

我如何使用 Javascript 来完成这项工作？请帮帮我。

Answer 1

用纯 javascript 说明这一点将是纯粹的痛苦 :) 我建议使用 jQuery，例如：

$(':checkbox').click(function() {
    var checkbox = $(this);
    var row = checkbox.closest('tr');
    var inputText = $('input[type=text]', row);
    if (checkbox.is(':checked')) {
        inputText.attr('readonly', 'readonly');
    }
    else {
        inputText.removeAttr('readonly');
    }
});

否则

function HandleClickOnCheckbox() {
    var checkbox = this;
    var row;
    var iter = checkbox;
    while (!row) {
        iter = iter.parent;
        if (iter == window) {
            break;
        }
        if (iter.tagName == 'tr') {
            row = iter;
            break;
        }
    }
    if (!row) {
        alert('row not found');
        return false;
    }
    var textBoxes = GetTextBoxes(row);
    var method;
    if (checkbox.checked) {
        var disabledAttribute = document.createAttribute('disabled');
        disabledAttribute.nodeValue = 'disabled';
        method = function(textBox) {
            textBox.setAttributeNode(disabledAttribute);
        };
    }
    else {
        method = function(textBox) {
            textBox.removeAttribute('disabled', 0);
        }
    }
    for (var i = 0; i < textBoxes.length; i++) {
        var textBox = textBoxes[i];
        method(textBox);
    }
}
function GetTextBoxes(element) {
    var textBoxes = new Array();
    for (var i = 0; i < element.children.lenght; i++) {
        var child = element.children[i];
        if (child.tagName == 'input') {
            if (child.type == 'text') {
                textBoxes.push(child);
            }
        }
        if (child.tagName == 'td') {
            var childTextBoxes = GetTextBoxes(child);
            if (childTextBoxes.length) {
                for (var j = 0; j < childTextBoxes.length; j++) {
                    var childTextBox = childTextBoxes[j];
                    textBoxes.push(childTextBox);
                }
            }
        }
    }
    return textBoxes;
}

这未经测试！

Answer 2

也许，您可以从使用 if/else 语句处理复选框的单击事件开始，以检查复选框是否被实际选中。如果是，您可以使用复选框所在的行来查找不同单元格中的所有文本框并启用/禁用它们。

您使用的是 JQuery 还是纯 Javascript？

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

或者类似的东西。我必须对其进行测试才能确定。

已编辑以反映 Andreas 的评论。

Answer 4

如果你使用 Jquery，试试这个 sn-p（假设复选框有一个名为“checkbox”的类）。

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