根据CheckBox状态禁用与启用Selectize下拉框的问题

调用enable()方法报错、只能禁用无法启用的核心原因有三个：

• 事件触发时机不对：复选框的状态变更事件触发时，Selectize下拉框还没完成初始化，此时$('#' + Id)[0].selectize拿到的是空值，直接调用方法就会抛出类型错误
• 禁用逻辑不规范：之前的禁用操作没有走Selectize官方API，直接给原生select DOM节点加了disabled属性，破坏了Selectize内部的实例状态
• 重复初始化控件：同一个下拉框多次调用selectize()初始化，导致实例引用错乱

1. 所有实例方法调用前加非空校验 #

不管是启用还是禁用逻辑，先判断Selectize实例是否存在，从根源避免空值报错，参考代码：

// 复选框事件绑定
$('#targetCheckbox').on('change', function () {
  const checked = $(this).prop('checked')
  const selectDom = $('#' + Id)[0]
  // 实例不存在就直接终止逻辑，不执行后续方法
  if (!selectDom.selectize) return

  if (checked) {
    selectDom.selectize.enable()
  } else {
    selectDom.selectize.disable()
  }
})

2. 调整执行顺序 #

必须等Selectize完成初始化之后，再绑定复选框事件、同步状态：

// 先初始化Selectize，把你原来的配置项填进去
$('#' + Id).selectize({
  // 原有配置：比如options、valueField、labelField、placeholder等
})

// 页面DOM加载完成后，主动触发一次复选框change事件，同步初始状态
$(function () {
  $('#targetCheckbox').trigger('change')
})

3. 注意避坑 #

• 不要直接用jQuery操作原生select的disabled属性实现禁用/启用，必须用Selectize实例提供的disable()、enable()方法，否则会打乱控件内部状态
• 如果你在原生select标签上写了原生的disabled属性，初始化Selectize之前要先移除：

$('#' + Id).prop('disabled', false).selectize(/* 配置参数 */)

• 如果下拉框是动态渲染到页面的，一定要等下拉框DOM插入到页面之后，再执行Selectize初始化逻辑，不要提前绑定事件

内容的提问来源于stack exchange，提问作者Khaled Md Tuhidul Hossain