如何在HTML内联JS中根据布尔值启用/禁用指定下拉选项

给<option>标签添加disabled="disabled"属性即可让选项变为不可选状态，你现在是在DataTable的render函数里拼接HTML字符串，只需要在拼接对应选项时加入条件判断，动态决定是否追加disabled属性就行。

实现逻辑 #

• 利用JS三元运算符判断已定义的isEnable布尔值
  • isEnable为true时，返回不带disabled属性的普通option标签，选项可选中
  • isEnable为false时，返回带disabled属性的option标签，选项置灰不可选
• 因为render函数是嵌套回调，你已经提前用self缓存了外层实例的this指向，直接读取self.isEnable即可拿到正确的变量值，不会出现作用域错误

修改后可直接运行的代码 #

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) {         
                    if (self._access !== CBTFLASH.UTILS.Constants.FULLCONTROL_ACCESS) {
                        return '';
                    }
                    // 动态生成受控的Close Amount选项
                    const closeAmountOption = self.isEnable
                        ? '<option value="Close">Close Amount</option>'
                        : '<option value="Close" disabled="disabled">Close Amount</option>';

                    // 拼接完整下拉框HTML，顺便修复原代码单引号内直接换行的语法错误
                    return '<select class="ddlSelectAction dropdown_md" disabled="disabled" data-status="'+full.onlineIdStatus+'" data-value="'+full.onlineId+'" data-pwdstatus="'+full.passwordRevokeStatusCode+'" data-custguid="'+full.customerGuid+'">'
                        + '<option value="">Select Action</option>'
                        + '<option value="SUSPEND">Suspend</option>'
                        + '<option value="UNSUSPEND">Unsuspend</option>'
                        + '<option value="REVOKE">Revoke</option>'
                        + closeAmountOption
                        + '<option value="ZELLETOKEN">Block/Unblock Zelle Token</option>'
                        + '</select>';
                }   
            }
        ]
    });
}

补充说明 #

• 原代码直接在单引号包裹的字符串内换行，会触发JS语法错误，修改后用+做字符串拼接修复了这个问题
• 如果后续需要调整控制逻辑，比如isEnable为true时禁用选项，只需要调换三元运算符两个分支的返回内容即可
• 控制整个下拉框的启用/禁用状态逻辑完全一致，只需要把条件判断挪到<select>标签的属性拼接位置即可

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