使用JavaScript实现单选按钮切换时禁用HTML必填输入框

嗨，这个问题我之前做电商订单系统的时候也碰到过！核心痛点就是不管表单元素有没有被隐藏，只要带了required属性，浏览器原生校验或者你用的校验插件都会死磕这个规则，导致自提模式下提交不了。下面给你几个落地性强的解决思路：

这是最通用的方案，核心就是切换配送类型时，给隐藏的输入框移除required，显示时再加回来，完美适配浏览器原生校验。

先给你的HTML结构补个示例（方便对应逻辑）：

<!-- 配送类型单选按钮 -->
<div class="delivery-options">
  <input type="radio" name="deliveryType" value="pickup" id="pickup">
  <label for="pickup">自提</label>
  
  <input type="radio" name="deliveryType" value="delivery" id="delivery" checked>
  <label for="delivery">配送</label>
</div>

<!-- 配送地址区域（默认显示） -->
<div id="delivery-address-group">
  <input type="text" name="address" placeholder="请填写收货地址" required>
  <input type="text" name="city" placeholder="请填写城市" required>
  <input type="text" name="province" placeholder="请填写省/州" required>
  <input type="text" name="zipcode" placeholder="请填写邮编" required>
</div>

然后写JS逻辑监听单选按钮切换：

// 获取DOM元素
const pickupRadio = document.getElementById('pickup');
const deliveryRadio = document.getElementById('delivery');
const addressGroup = document.getElementById('delivery-address-group');
const requiredAddressFields = addressGroup.querySelectorAll('[required]');

// 封装切换逻辑函数
function toggleDeliveryFields(shouldShow) {
  // 控制显示/隐藏
  addressGroup.style.display = shouldShow ? 'block' : 'none';
  
  // 同步required属性
  requiredAddressFields.forEach(field => {
    if (shouldShow) {
      field.setAttribute('required', '');
    } else {
      field.removeAttribute('required');
    }
  });
}

// 页面初始化时执行一次（匹配默认选中的配送类型）
toggleDeliveryFields(deliveryRadio.checked);

// 监听单选按钮变化
pickupRadio.addEventListener('change', () => toggleDeliveryFields(false));
deliveryRadio.addEventListener('change', () => toggleDeliveryFields(true));

这样一来，选自提时地址栏不仅隐藏，还会失去required属性，提交表单时就不会被校验了。

要是你的项目用了jQuery Validate做表单校验，这个插件默认会校验隐藏元素，所以可以用两种方式解决：

方式1：直接忽略所有隐藏元素 #

初始化校验器时加上ignore: ':hidden'配置，插件就会自动跳过隐藏的必填项：

$('#order-form').validate({
  ignore: ':hidden',
  // 其他校验规则...
});

方式2：动态添加/移除校验规则 #

如果不想全局忽略隐藏元素，也可以在切换配送类型时，给地址字段动态增删校验规则：

$('input[name="deliveryType"]').on('change', function() {
  const isDelivery = $(this).val() === 'delivery';
  
  // 地址、城市等字段的选择器
  const addressFields = $('[name="address"], [name="city"], [name="province"], [name="zipcode"]');
  
  if (isDelivery) {
    // 配送模式：添加必填规则
    addressFields.each(function() {
      $(this).rules('add', { required: true, messages: { required: '此字段不能为空' } });
    });
  } else {
    // 自提模式：移除必填规则
    addressFields.rules('remove');
  }
});

如果是你自己写的提交校验逻辑，那更简单了——提交时先判断当前选中的配送类型，只校验对应需要的字段就行：

document.getElementById('order-form').addEventListener('submit', function(e) {
  e.preventDefault(); // 先阻止默认提交
  let isFormValid = true;

  // 先校验通用必填项（比如订单商品、联系人等）
  // ...

  // 根据配送类型决定是否校验地址
  const isDelivery = document.getElementById('delivery').checked;
  if (isDelivery) {
    // 校验地址字段
    const address = document.querySelector('[name="address"]').value.trim();
    const city = document.querySelector('[name="city"]').value.trim();
    
    if (!address) {
      alert('请填写收货地址');
      isFormValid = false;
    }
    if (!city) {
      alert('请填写城市');
      isFormValid = false;
    }
    // 其他地址字段同理...
  }

  // 所有校验通过再提交表单
  if (isFormValid) {
    this.submit();
  }
});

总的来说，动态控制required属性是最通用的方案，不管用原生校验还是第三方插件都能适配。如果用了特定的校验库，记得查一下它对隐藏元素的处理规则，针对性调整就好啦！

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