如何通过内联JavaScript if条件控制下拉框选项的启用/禁用状态

要根据布尔值isEnable控制下拉选项的启用/禁用状态，核心是给目标<option>标签按需添加HTML原生的disabled属性，操作步骤如下：

• 先移除你现有代码里<select>标签上的disabled="disabled"属性，这个属性会让整个下拉框完全不可交互，不删掉的话单独控制内部选项没有效果。
• 在render函数拼接选项字符串时，通过三元运算符判断isEnable的值，决定是否给Close Amount对应的option加disabled属性。注意你已经提前存了var self = this，在render回调里直接取self.isEnable就能拿到正确的属性值，不会出现this指向错乱的问题。

修改后的完整代码片段：

initGrid: function() {
  var self = this;
  this.isEnable = false;
  this._onlineIDDetailsGrid = this.findControl("#onlineIDDetailsGrid").DataTable({
    "columnDefs": [{
      className: "dt-body-center",
      "targets": [0, 3, 4, 5]
    }],
    "columns": [{
      "title": "Actions",
      "render": function(data, type, full) {
        return '<select class="ddlSelectAction dropdown_md">' +
          '<option value="">Select Action</option>' +
          '<option value="SUSPEND">Suspend</option>' +
          // 按isEnable值控制option禁用状态：isEnable为false时禁用，为true时启用
          '<option value="Close" ' + (self.isEnable ? '' : 'disabled') + '>Close Amount</option>' +
          '</select>';
      }
    }]
  })
}

补充说明 #

• 如果你的业务逻辑是isEnable为true时禁用Close Amount选项，只需要把三元判断的逻辑反过来，写成(self.isEnable ? 'disabled' : '')即可。
• 如果isEnable的值会在表格初始化完成后动态变更，上述初始化时的拼接逻辑不会自动更新选项状态，你需要在isEnable赋值后重新渲染DataTable的对应行，或者直接通过DOM选择器找到对应下拉的Close选项，手动修改它的disabled属性。

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