javascript - 根据 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;
}

这还没有经过测试!