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

或者类似的东西。我必须测试一下才能确定。

编辑以反映安德烈亚斯的评论。

Answer 4

如果您使用的是 Jquery，请尝试此代码片段（假设该复选框有一个名为“checkbox”的类）。

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