如何通过jQuery与Handlebar.js根据{{status}}值禁用复选框？

你的现有代码是不可行的，我来帮你分析问题并给出正确的实现方式：

先说说你现有代码的问题 #

1. ID设置不规范且重复：模板里给checkbox设置的id="{{status}}"有两个问题——一是status值比如No(Function)包含空格和特殊字符，不符合HTML ID的命名规范；二是如果有多行的status相同，会生成重复的ID，而HTML要求ID必须唯一，这会导致后续DOM操作出错。
2. JavaScript逻辑错误：你在{{#invoices}}循环里重复定义disable函数，这会导致函数覆盖，而且逻辑本身也不对——document.getElementById('{{status}}')返回的是DOM元素对象，不是元素的文本值，同时你要禁用的是当前行的checkbox，而不是全局找select_option元素（实际上你的checkbox的ID不是select_option，只是name是这个）。

正确的实现方式 #

方法一：直接在Handlebars模板中渲染时禁用推荐

这种方式最简洁，不需要额外的JavaScript，直接在模板里判断status的值，给对应的checkbox添加disabled属性。

首先，原生Handlebars默认没有相等比较的助手，需要先注册一个：

Handlebars.registerHelper('eq', function(a, b) {
  return a === b;
});

然后修改你的Handlebars模板：

{{#invoices}}
<tr>
  <td>
    <input 
      name="select_option" 
      value="{{open_amount}}" 
      type="checkbox"
      {{#if (eq status "No(Function)")}}disabled{{/if}}
    />
  </td>
  <td style="white-space:nowrap;">{{company_code}}</td>
  <td style="white-space:nowrap;">{{invoice_no}}</td>
  <td style="white-space:nowrap;">{{invoice_type}}</td>
  <td style="white-space:nowrap;">{{invoice_date}}</td>
  <td style="white-space:nowrap;">{{due_date}}</td>
  <td style="white-space:nowrap;"><font color="{{color}}">{{status}}</font></td>
  <td style="white-space:nowrap;">{{open_amount}}</td>
</tr>
{{/invoices}}

这样当status等于No(Function)时，checkbox会被直接渲染成带有disabled属性的状态，页面加载后就无法选中了。

方法二：渲染完成后用JavaScript处理

如果因为某些原因需要用JS来处理，可以在模板渲染完成后，遍历所有行，根据status单元格的内容来禁用对应的checkbox：

先修改模板，给checkbox添加一个绑定status的data属性：

{{#invoices}}
<tr>
  <td>
    <input 
      name="select_option" 
      value="{{open_amount}}" 
      type="checkbox"
      data-status="{{status}}"
    />
  </td>
  <!-- 其他单元格保持不变 -->
</tr>
{{/invoices}}

然后编写独立的JavaScript代码不要放在Handlebars循环里：

// 确保页面渲染完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有目标checkbox
  const checkboxes = document.querySelectorAll('input[name="select_option"]');
  checkboxes.forEach(checkbox => {
    const status = checkbox.dataset.status;
    if (status === 'No(Function)') {
      checkbox.disabled = true;
    }
  });
});

总结 #

推荐使用方法一，因为它更高效，不需要额外的DOM操作，直接在渲染阶段就完成了状态设置，代码也更简洁。

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