如何为数组中除当前选中元素（this）外的其他元素设置属性？（附按钮动态禁用场景示例）

我明白你的需求——当用户点击某个上传按钮后，要禁用其他未被点击的按钮，防止重复操作，等后端响应返回后再恢复所有按钮的可用性。结合你现有的原生JS代码，我帮你调整实现这个功能：

修改后的原生JS实现 #

// 先获取所有上传按钮，放在外部作用域方便后续访问
const uploadButtons = Array.from(document.getElementsByClassName("upload-button"));

uploadButtons.forEach(button => {
  button.addEventListener("click", function(){
    const clickedButton = this;
    const buttonSpinner = clickedButton.getElementsByTagName("span")[0];
    
    // 显示当前按钮的加载状态
    buttonSpinner.classList.remove("d-none");
    
    // 禁用所有未被点击的按钮，并添加视觉提示
    uploadButtons.forEach(btn => {
      if (btn !== clickedButton) {
        btn.disabled = true;
        btn.classList.add("opacity-50"); // Bootstrap半透明类，直观提示不可用
      }
    });
    
    const destination = clickedButton.value;
    // 把必要元素传给uploadData，方便后续恢复状态
    uploadData(destination, buttonSpinner, uploadButtons);
  });
});

function uploadData(destination, buttonSpinner, allButtons){
  const link = "https://www.google.com/";
  const description = "Stack Overflow";
  new Upload(link, description, destination, buttonSpinner, allButtons);
}

class Upload {
  constructor(link=null, description=null, destination="submit", buttonSpinner=null, allButtons=null){
    this.link = link;
    this.description = description;
    this.destination = destination;
    this.buttonSpinner = buttonSpinner;
    this.allButtons = allButtons;
    this.log();
    this.disableButtonSpinner();
  }
  
  log(){
    console.log(this.link);
  }
  
  wait(){
    return new Promise(resolve => setTimeout(resolve, 3000)); // 模拟后端请求
  }
  
  async disableButtonSpinner(){
    await this.wait(); // 等待模拟的后端响应
    
    // 隐藏当前按钮的加载状态
    this.buttonSpinner.classList.add("d-none");
    
    // 恢复所有按钮的可用状态和样式
    this.allButtons.forEach(btn => {
      btn.disabled = false;
      btn.classList.remove("opacity-50");
    });
  }
}

关键逻辑说明 #

• 作用域优化：把uploadButtons提升到外部作用域，确保点击事件和异步回调都能访问到所有按钮元素。
• 点击时禁用其他按钮：遍历所有按钮，排除当前点击的按钮，设置disabled = true并添加半透明样式，给用户明确的不可用提示。
• 异步完成后恢复状态：在模拟后端响应结束后，先隐藏当前按钮的加载动画，再遍历所有按钮恢复可用状态和默认样式。

如果你用jQuery，也可以参考这个简洁版本 #

$(document).ready(function() {
  const $uploadButtons = $(".upload-button");
  
  $uploadButtons.on("click", function() {
    const $clickedBtn = $(this);
    const $spinner = $clickedBtn.find("span.spinner-border");
    
    // 显示加载动画
    $spinner.removeClass("d-none");
    
    // 快速禁用其他按钮并添加视觉提示
    $uploadButtons.not($clickedBtn).prop("disabled", true).addClass("opacity-50");
    
    const destination = $clickedBtn.val();
    
    // 模拟异步请求
    setTimeout(() => {
      $spinner.addClass("d-none");
      $uploadButtons.prop("disabled", false).removeClass("opacity-50");
    }, 3000);
  });
});

内容的提问来源于stack exchange，提问作者Adventure-Knorrig