如何批量禁用表单中的多个输入控件？

当然可以，不用给每个控件单独加disabled属性，以下是不同技术栈下的实现方案：

原生JavaScript方案 #

通过DOM操作批量选中表单内的输入控件，统一设置禁用状态：

// 获取目标表单元素
const targetForm = document.getElementById('your-form-id');
// 选中表单内所有可交互的输入类控件
const formControls = targetForm.querySelectorAll('input, select, textarea, button');

// 封装切换禁用状态的函数
function toggleFormDisabled(isDisabled) {
  formControls.forEach(control => {
    control.disabled = isDisabled;
  });
}

// 特定条件触发时调用
// 示例：禁用所有控件
toggleFormDisabled(true);
// 示例：取消禁用
toggleFormDisabled(false);

Vue框架方案 #

最简便的方式是用<fieldset>标签包裹所有表单控件，利用其disabled属性的继承特性：

<fieldset :disabled="isDisabled">
  <!-- 此处放置所有50个输入控件 -->
  <input type="text" placeholder="输入框1" />
  <select>
    <option>选项1</option>
  </select>
  <!-- 其他控件... -->
</fieldset>

只要isDisabled为true，<fieldset>内部所有表单控件会自动被禁用。如果不想用<fieldset>，也可以自定义指令批量处理：

// 注册全局自定义指令
Vue.directive('batch-disable', {
  bind(el, binding) {
    const controls = el.querySelectorAll('input, select, textarea, button');
    controls.forEach(ctrl => ctrl.disabled = binding.value);
  },
  update(el, binding) {
    if (binding.oldValue !== binding.value) {
      const controls = el.querySelectorAll('input, select, textarea, button');
      controls.forEach(ctrl => ctrl.disabled = binding.value);
    }
  }
});

在表单容器上使用指令：

<form v-batch-disable="isDisabled">
  <!-- 所有输入控件 -->
</form>

React框架方案 #

同样可以借助<fieldset>的特性快速实现：

import { useState } from 'react';

function TargetForm() {
  const [isDisabled, setIsDisabled] = useState(false);

  return (
    <fieldset disabled={isDisabled}>
      {/* 所有50个输入控件 */}
      <input type="text" />
      <select>
        <option>示例选项</option>
      </select>
      {/* 其他控件... */}
    </fieldset>
  );
}

若不想用<fieldset>，可通过ref结合useEffect批量操作：

import { useState, useRef, useEffect } from 'react';

function TargetForm() {
  const [isDisabled, setIsDisabled] = useState(false);
  const formRef = useRef(null);

  useEffect(() => {
    if (!formRef.current) return;
    const controls = formRef.current.querySelectorAll('input, select, textarea, button');
    controls.forEach(ctrl => ctrl.disabled = isDisabled);
  }, [isDisabled]);

  return (
    <form ref={formRef}>
      {/* 所有输入控件 */}
    </form>
  );
}

内容的提问来源于stack exchange，提问作者Mardymar68