WordPress动态元素下，文件上传时禁用其他字段的实现问询

嗨，这个问题我太熟悉了！在WordPress里因为很多元素是动态生成的（不像静态HTML一开始就全在页面里），原来直接绑定元素的代码自然就失效了。不过别担心，用MutationObserver（DOM变化监听）就能完美解决，它可以盯着指定的容器，一旦里面的子元素（就是上传文件后才出现的那些）被添加或移除，就立刻执行禁用/启用字段的逻辑。

下面是具体的实现步骤和代码：

核心思路 #

我们不需要直接监听那些还没“出生”的子元素，而是监听它们的父容器（就是你说的那个上传后会插入子元素的DIV）。当父容器里出现子元素时，就禁用其他字段；如果子元素被删掉（比如用户取消了上传的文件），再把字段重新启用。

代码实现 #

// 第一步：替换成你网站中那个上传容器的选择器（ID或类名）
const uploadContainer = document.getElementById('upload-target-div');
// 第二步：替换成你要禁用的其他字段的选择器（比如表单里除了上传框的所有输入/选择框）
const otherFormFields = document.querySelectorAll('form input:not([type="file"]), form select, form textarea');

// 创建DOM变化监听器
const domObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 当有子元素被添加到上传容器时
    if (mutation.addedNodes.length > 0) {
      otherFormFields.forEach(field => {
        field.disabled = true;
        // 加上aria属性，让屏幕阅读器也能识别禁用状态（可选但推荐）
        field.setAttribute('aria-disabled', 'true');
      });
    }
    // 当有子元素被移除，且容器现在空了时
    if (mutation.removedNodes.length > 0 && uploadContainer.children.length === 0) {
      otherFormFields.forEach(field => {
        field.disabled = false;
        field.removeAttribute('aria-disabled');
      });
    }
  });
});

// 配置监听器：只关注子节点的添加和移除
const observerOptions = {
  childList: true,
  subtree: false // 如果上传的子元素是嵌套在更深层级的，改成true
};

// 启动监听器，同时做初始检查（比如编辑页面加载时已经有上传的文件）
if (uploadContainer) {
  domObserver.observe(uploadContainer, observerOptions);
  
  // 页面加载完成时，检查容器是否已有子元素，有的话直接禁用字段
  if (uploadContainer.children.length > 0) {
    otherFormFields.forEach(field => {
      field.disabled = true;
      field.setAttribute('aria-disabled', 'true');
    });
  }
}

关键说明 #

1. 选择器替换：一定要把代码里的upload-target-div和otherFormFields的选择器改成你网站实际的元素标识，不然代码找不到对应元素就不会生效。
2. MutationObserver的优势：不管上传是通过点击按钮、拖放文件还是WordPress自带的媒体上传器触发的，只要DOM有变化，它都能捕捉到，比绑定单个上传事件更通用。
3. 初始检查：考虑到编辑页面可能已经有之前上传的文件，所以页面加载时先检查一次容器状态，避免漏禁用字段。

如果你的上传逻辑还有特殊情况（比如多个文件上传），只需要稍微调整判断条件（比如检查uploadContainer.children.length > 0改成判断文件数量）就行啦！

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