启用/禁用多个输入字段 JS 的更有效方法

Question

问题：我有提交字段列表的表单。我的表单包括 2 个“覆盖”字段：计数器 - 要提交的项目数量字段覆盖 - 如果填充它假设覆盖表中具有相同值的所有输入最后我有 5 个字段输入（field_1、field_2、field_3、field_4 和 field_5）。我想做的是：计数器 - 当填充时，它将禁用字段_数字低于计数器中的值，例如。当 counter = 3 时，输入 field_4 和 field_5 将被禁用。field_0 - 当为空时，我希望用户能够在表中填写任何内容。填充后，我希望将 field_0 复制到表中的所有单元格。我做了什么：我目前的工作代码效率极低。我有一个复杂的“if”语句，它逐个检查每个项目（field_1 - field_5）的 counter 和 field_0，并将它们设置为启用/禁用或复制 field_0 值。我还有“clearFieldClass”函数，它在更改 field_0 时清除所有类“field”的项目。虽然它适用于 5 个字段和一个字段类型，但页面的最终版本将有 200 个字段 x 10 个不同的类。我试图避免让 2000 行代码做基本相同的事情。

Answer 1

从您的 html 中删除 onchange 属性并使用以下代码：

 document.querySelector('form').addEventListener('change', () => {

   document.querySelectorAll('.field').forEach((_el, index) => {

 if(!isNaN(+counter.value) && +counter.value != 0  && index + 1 > +counter.value){

  _el.disabled = 'disabled';

  _el.value = '';

  console.log('in')

 }

 else{

  _el.removeAttribute('disabled');

  _el.value = field_0.value;

 }

   });

 })