如何根据动态添加的类控制jQuery UI Selectable的启用状态？

首先，你的代码存在两个关键问题，导致无法完全满足需求，尤其是动态类变化的场景：

1. 语法错误 #

在else分支里，选择器没有用引号包裹，这会直接触发语法错误：

// 错误写法
$(.ci-journey-interactions-canvas__journey-list).selectable({});
// 正确写法
$(".ci-journey-interactions-canvas__journey-list").selectable({});

浏览器控制台会抛出Uncaught SyntaxError，导致代码无法正常执行。

2. 无法响应动态类变化 #

你的代码是一次性执行逻辑，只会在代码运行时判断一次staged类的存在情况。如果后续通过其他操作（比如用户交互、异步请求）动态添加/移除staged类，代码不会自动重新执行，Selectable的状态也不会同步更新。

正确的实现方案 #

要实现「动态检测staged类并自动切换Selectable状态」，我们需要结合初始化逻辑和类变化监听，这里提供两种可行方案：

方案一：使用MutationObserver监听类变化（通用场景） #

这是最全面的方案，能捕获任何方式导致的类属性变化：

// 1. 获取目标元素
const $journeyList = $(".ci-journey-interactions-canvas__journey-list");

// 2. 先初始化Selectable组件（默认启用）
$journeyList.selectable();

// 3. 根据初始类状态设置初始禁用/启用
if ($journeyList.hasClass("staged")) {
  $journeyList.selectable("disable");
}

// 4. 创建观察者，监听类属性变化
const classObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === "class") {
      // 根据当前类状态切换Selectable
      if ($journeyList.hasClass("staged")) {
        $journeyList.selectable("disable");
      } else {
        $journeyList.selectable("enable");
      }
    }
  });
});

// 启动监听，仅监听class属性
classObserver.observe($journeyList[0], { attributes: true, attributeFilter: ["class"] });

方案二：在修改类的代码处手动触发更新（轻量场景） #

如果你明确知道staged类是通过特定代码添加/移除的，可以直接在操作后调用状态更新函数，这种方式更轻量：

// 封装状态更新函数
function toggleSelectableStatus() {
  const $journeyList = $(".ci-journey-interactions-canvas__journey-list");
  if ($journeyList.hasClass("staged")) {
    $journeyList.selectable("disable");
  } else {
    // 未初始化则先初始化，否则直接启用
    if (!$journeyList.data("ui-selectable")) {
      $journeyList.selectable();
    } else {
      $journeyList.selectable("enable");
    }
  }
}

// 页面加载时执行一次初始化
toggleSelectableStatus();

// 在你修改staged类的代码后调用该函数
// 示例：添加staged类时
$journeyList.addClass("staged");
toggleSelectableStatus();

// 示例：移除staged类时
$journeyList.removeClass("staged");
toggleSelectableStatus();

关键提示 #

• 不要重复调用selectable({})初始化组件，而是通过selectable("enable")/selectable("disable")切换状态，避免重复绑定事件导致的异常。
• MutationObserver是浏览器原生API，兼容性覆盖IE11及所有现代浏览器，能处理所有动态类变化场景。

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