Safari表单POST禁用单选按钮行为异常技术求助

原因 #

Safari对form.submit()的处理逻辑和其他主流浏览器存在差异：调用submit()后，浏览器不会立即完成表单提交数据的收集，而是异步启动提交流程，此时后续的重新激活单选按钮代码会优先执行，导致原本被设为disabled的单选按钮在数据收集前恢复可用，最终被纳入POST数据中。而Chrome、Firefox等浏览器是同步完成数据收集后再执行后续代码，因此不会出现这个问题。

解决办法 #

1. 延迟恢复单选按钮 #

通过setTimeout让重新激活操作延后执行，确保表单提交的数据收集完成后再恢复控件状态：

this.submit();
// 延迟100ms足够让Safari完成提交数据收集
setTimeout(() => {
  document.querySelectorAll('.ignore').forEach(radio => radio.disabled = false);
}, 100);

2. 移除name属性替代disabled #

直接操作单选按钮的name属性，提交前移除name（浏览器不会提交无name的控件），提交后再恢复：

const ignoreRadios = document.querySelectorAll('.ignore');
// 保存原始name值
const originalNames = Array.from(ignoreRadios).map(radio => radio.name);

// 移除name属性
ignoreRadios.forEach((radio, index) => radio.name = '');

// 存入隐藏字段
_func_setHiddenFIeld();

// 提交表单
this.submit();

// 恢复原始name属性
ignoreRadios.forEach((radio, index) => radio.name = originalNames[index]);

3. 利用submit事件的同步逻辑 #

将处理逻辑移到表单的submit事件监听中，先阻止默认提交，完成禁用和隐藏字段赋值后再手动提交，确保执行顺序：

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const ignoreRadios = this.querySelectorAll('.ignore');
  ignoreRadios.forEach(radio => radio.disabled = true);
  
  _func_setHiddenFIeld();
  
  // 手动提交不会再次触发submit事件
  this.submit();
  
  // 恢复单选按钮
  ignoreRadios.forEach(radio => radio.disabled = false);
});

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