如何创建类实现数值为0时批量禁用jQuery按钮

嘿，这个问题太有共鸣了——当按钮数量越来越多，重复写相同的设置和判断逻辑真的会让代码变得乱糟糟，维护起来头疼。咱们可以用统一配置+循环批量处理的方式来解决，既清爽又易于扩展，以后加新按钮只需要改配置就行，不用复制粘贴一堆重复代码。

第一步：创建按钮配置数组 #

先把所有按钮的关键信息（选择器、显示文本、对应result里的属性名）集中存到一个数组里，相当于给每个按钮做个“档案”：

// 定义按钮配置数组，所有按钮的信息都在这里管理
const buttonConfigs = [
  {
    selector: "#btnProduction",
    label: "Production (kWh):",
    valueKey: "Production"
  },
  {
    selector: "#btnAvailability",
    label: "Availability (%):",
    valueKey: "Availability"
  },
  {
    selector: "#btnCategoryA",
    label: "Category A Disabled Errors:",
    valueKey: "ErrorDisabled"
  },
  {
    selector: "#btnFailedBatt",
    label: "Failed Battery Test:",
    valueKey: "FailedBattery"
  },
  {
    selector: "#btnPowerConv",
    label: "Power Converter OFF:",
    valueKey: "PowerConv"
  }
];

第二步：循环批量处理所有按钮 #

接下来用forEach循环遍历这个配置数组，一次性完成内容设置和禁用状态判断：

// 遍历配置数组，批量处理每个按钮
buttonConfigs.forEach(config => {
  // 获取当前按钮的jQuery对象
  const $targetBtn = $(config.selector);
  // 从result里取出对应的值
  const targetValue = result[0][config.valueKey];

  // 设置按钮的HTML内容（用模板字符串更易读）
  $targetBtn.html(`
    <span class="BtnsStyleText">${config.label}</span>
    </br></br>
    <span class="BtnsStyleValue">${targetValue}</span>
  `);

  // 判断数值是否为0，设置禁用状态
  // 这里用prop()比attr()更合适，因为disabled是DOM元素的布尔属性
  $targetBtn.prop("disabled", targetValue === 0);
});

为什么这么做？ #

• 可维护性拉满：以后要加新按钮，只需要在buttonConfigs里新增一个对象就行，不用重复写html()和禁用判断的代码
• 逻辑统一：所有按钮的渲染和禁用规则都在同一个地方控制，不会出现某个按钮逻辑不一致的情况
• 代码更简洁：把重复的逻辑抽离出来，避免冗余，可读性也更强

如果之后需要调整禁用规则（比如数值小于10也禁用），只需要修改targetValue === 0这个判断条件，所有按钮都会自动生效，超级方便。

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