在js中禁用整个表单，而无需单独禁用每个字段

Question

我已经使用JSF创建了一个表单。我的表格中有很多手风琴面板，每个手风琴面板都包含几个字段。

我想使用js禁用一个这样的手风琴面板的所有字段。有一种快捷方式可以一次性禁用整个手风琴面板，而不是单独禁用手风琴面板的每个字段。

Answer 1

您可以将一个类添加到所有表单字段，然后选择具有该类的字段。

一旦有了DOM引用，就可以遍历表单字段并禁用。

Demo：

function disableForm() {
    let elems = document.querySelectorAll(".form-elements");
    for (const elem of elems) {
        elem.disabled = true;
    }
}

function enableForm() {
    let elems = document.querySelectorAll(".form-elements");
    for (const elem of elems) {
        elem.disabled = false;
    }
}

<form>
<label>Element 1</label><br />
<input type="text" class="form-elements" /> <br />
<label>Element 2</label> <br />
<select class="form-elements"> <br />
    <option value="1">1</option>
</select>
<br />
</form>
<br />
<button type="button" onclick="disableForm()">Disable Form</button>
<button type="button" onclick="enableForm()">Enable Form</button>