带拨动开关的锁定/解锁表格

Question

我正在寻找一种方法来让按钮切换我的表单字段。当使用切换按钮“锁定”表单时，无法输入任何数据。当“解锁”数据应该被允许输入。我想要达到的目的很简单，就是避免用户不小心输入。

我找到了下面的代码，它可以工作。唯一的问题是它只适用于一个输入字段。我希望它能够在更多方面发挥作用。

<input type="checkbox" id="yourBox">
<input type="text" id="yourText">
<script>
document.getElementById('yourBox').onchange = function() {
    document.getElementById('yourText').disabled = this.checked;
};
</script>

Answer 1

使用 CSS 类标记要禁用的字段，然后使用 jQuery 禁用它们。

jQuery - Disable Form Fields

如果您想要纯 Javascript 解决方案，只需重复此行

document.getElementById('yourText').disabled = this.checked;

对于每个字段。

或者，您可以这样做：How to Get Element By Class in JavaScript?。请注意，您可以为同一个字段分配多个 CSS 类，因此请分配另一个类来标识需要禁用的字段。