Question

我有这个复选框，每当我选中复选框时，如何禁用表格（禁用表格中的所有输入字段）？

<label><input type="checkbox" name="view" value="d">N/A</label>

是否可以使用纯JavaScript而不是jQuery。

这是现在的代码

var elems = document.getElementById('table-id').querySelectorAll('input,select,textarea');
document.getElementById('check').onchange = function () {
    if (document.getElementById('check').checked) {
        for (var i = 0; i < elems.length; i++) {
            elems[i].disabled = true;
        }
    } else {
        for (var i = 0; i < elems.length; i++) {
            elems[i].disabled = false;
        }    
        }
    }

和表格

<table id='table-id' border="1">

但它显示如下错误：

未捕获的TypeError：无法读取null的“querySelectorAll”属性

Answer 1

使用jQuery很容易：

$("#tableId").find(":input").prop("disabled", true);

使用Javascript，时间稍长：

var elems = document.getElementById('tableId').querySelectorAll('input,select,textarea');

for (var i = 0; i < elems.length; i++) {
    elems[i].disabled = true;
}

小提琴：http://jsfiddle.net/abhitalks/6s7QL/2/

<强> 更新：

添加了您的复选框代码：

document.getElementById('checkboxId').onchange = function () {...

Answer 2

这是纯JavaScript版本，可以实现您想要的技巧：

var table = document.getElementById('tableId'),
    inputs = table.getElementsByTagName('input'),
    checkbox = document.getElementById('checkboxId');

checkbox.onchange = function(e) {
    if(checkbox.checked) {
        disableTable(true);
    } else {
        disableTable(false);
    }
}

function disableTable(disableState) {
    for (var i = 0, l = inputs.length; i < l; i++) {
        inputs[i].disabled = disableState;
    }
}

以下是JSFiddle中的工作示例。

使用复选框禁用表

2 个答案: