使用复选框禁用表

Disable table using checkbox

本文关键字：复选框      更新时间：2023-09-26

我有这个复选框，如何禁用表(禁用表中的所有输入字段)每当我检查复选框?

<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: Cannot read property 'querySelectorAll' of null

使用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 () {...

下面是你想要的纯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中的工作示例

相关文章：