在js中禁用整个表单而不单独禁用每个字段

Question

我已经使用 JSF 创建了一个表单。我的表单中有许多手风琴面板，每个手风琴面板由几个字段组成。

我想使用 js 禁用一个这样的手风琴面板的所有字段。除了单独禁用手风琴面板的每个字段之外，是否有一种快捷方法可以一次性禁用整个手风琴面板。

Answer 1

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

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

演示：

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>