使用jQuery禁用提交按钮，直至所有表单字段（input、radio等）均已填写

嗨，基于你提到的需求（已经有单选、复选框的示例，也了解纯input字段的实现），我整理了一套能覆盖所有常见表单字段类型的解决方案，确保只有当所有字段都完成填写/选择后，提交按钮才会解除禁用状态。

核心思路 #

咱们的核心逻辑很简单：

1. 给表单里的所有字段绑定「变化监听事件」（比如input、change）
2. 每次字段变化时，遍历所有必填字段，检查是否都已满足填写/选择要求
3. 根据检查结果，动态切换提交按钮的disabled属性

完整代码实现 #

HTML 示例表单

先搭一个包含多种字段的测试表单，覆盖文本输入、单选框、复选框、下拉选择、文本域这些常见类型：

<form id="myForm">
  <!-- 文本输入框 -->
  <div>
    <label>邮箱：</label>
    <input type="email" name="email" required>
  </div>

  <!-- 单选框组 -->
  <div>
    <label>性别：</label>
    <input type="radio" name="gender" value="male" required>男
    <input type="radio" name="gender" value="female" required>女
  </div>

  <!-- 复选框组（要求至少选1个） -->
  <div>
    <label>兴趣爱好（至少选1个）：</label>
    <input type="checkbox" name="hobby" value="reading">阅读
    <input type="checkbox" name="hobby" value="sports">运动
    <input type="checkbox" name="hobby" value="coding">编程
  </div>

  <!-- 下拉选择框 -->
  <div>
    <label>所在城市：</label>
    <select name="city" required>
      <option value="">请选择</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
    </select>
  </div>

  <!-- 文本域 -->
  <div>
    <label>个人简介：</label>
    <textarea name="bio" required></textarea>
  </div>

  <!-- 提交按钮（默认禁用） -->
  <button type="submit" id="submitBtn" disabled>提交表单</button>
</form>

JavaScript 逻辑实现

接下来写JS代码，实现字段检查和按钮状态切换：

const form = document.getElementById('myForm');
const submitBtn = document.getElementById('submitBtn');

// 检查所有字段是否都已完成的核心函数
function checkAllFields() {
  let allFilled = true;

  // 1. 处理所有带required属性的单个输入字段（文本框、文本域、单个复选框等）
  const singleFields = form.querySelectorAll('input[required]:not([type="radio"]):not([type="checkbox"]), textarea[required], select[required]');
  singleFields.forEach(field => {
    // 文本类字段：排除纯空白字符的情况
    if (field.type === 'textarea' || field.type === 'text' || field.type === 'email') {
      if (!field.value.trim()) {
        allFilled = false;
      }
    }
    // 下拉选择框：检查是否选中了非空值
    else if (field.tagName === 'SELECT') {
      if (field.value === '') {
        allFilled = false;
      }
    }
  });

  // 2. 处理单选框组
  const radioGroups = new Set(form.querySelectorAll('input[type="radio"][required]').map(radio => radio.name));
  radioGroups.forEach(groupName => {
    const checkedRadio = form.querySelector(`input[type="radio"][name="${groupName}"]:checked`);
    if (!checkedRadio) {
      allFilled = false;
    }
  });

  // 3. 处理复选框组（这里以至少选1个为例，你可以根据需求修改数量）
  const checkboxGroups = new Set(form.querySelectorAll('input[type="checkbox"][name]').map(checkbox => checkbox.name));
  checkboxGroups.forEach(groupName => {
    const checkedCheckboxes = form.querySelectorAll(`input[type="checkbox"][name="${groupName}"]:checked`);
    // 如果是必填的复选框组，检查是否有至少1个被选中
    if (form.querySelector(`input[type="checkbox"][name="${groupName}"][required]`) && checkedCheckboxes.length === 0) {
      allFilled = false;
    }
  });

  // 根据检查结果切换按钮状态
  submitBtn.disabled = !allFilled;
}

// 页面加载时先执行一次检查，确保初始状态正确
checkAllFields();

// 给表单绑定事件监听：所有字段的input/change事件都触发检查
form.addEventListener('input', checkAllFields);
form.addEventListener('change', checkAllFields);

关键细节说明 #

• 空白字符处理：文本类字段用trim()排除用户只输入空格的情况，确保真正的有效输入
• 单选/复选框组处理：通过name属性分组，避免重复检查同一组的多个选项
• 灵活适配需求：如果你的复选框要求选至少2个，只需要把checkedCheckboxes.length === 0改成checkedCheckboxes.length < 2即可
• 初始状态检查：页面加载时执行一次checkAllFields()，防止页面刷新后按钮状态异常

这样一套代码就能完美覆盖你提到的所有字段类型，确保只有当所有字段都完成后，提交按钮才会启用~

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