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语句处理复选框的click事件，以检查是否实际选中了复选框。如果是，您可以使用复选框所在的行来查找不同单元格中的所有文本框，并启用/禁用它们。

您使用的是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', '');
   }
});`

根据HTML中的复选框使行可编辑

4 个答案: