根据HTML中的复选框使行可编辑
根据HTML中的复选框使行可编辑
提问于 2010-07-19 15:24:58
我有一张HTML格式的表格。此表的内容是动态填充的。表的每一行都有文本框和一个复选框。加载页面时，行中的所有文本框都将处于只读状态。
现在，如果选中了特定行中的复选框，我希望将该行中文本框的状态更改为可编辑。此外，如果取消选中该复选框，则应将文本框设为只读。
我如何使用Javascript来实现这一点？请帮帮我。
回答 4
Stack Overflow用户
回答已采纳
发布于 2010-07-19 16:03:48
用普通的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;
}这是未经测试的！
Stack Overflow用户
发布于 2010-07-19 15:30:59
也许，您可以通过使用if/else语句处理checkbox的click事件来检查是否确实选中了checkbox。如果是，您可以使用复选框所在的行来查找不同单元格中的所有文本框，并启用/禁用它们。
你用的是JQuery还是普通的Javascript？
Stack Overflow用户
发布于 2010-07-19 15:50:47
如果你不介意使用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的评论。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3279127
复制相关文章
相似问题
腾讯云开发者
