如何在Select2下拉框禁用时设置CSS cursor为not-allowed？

当你通过原生表单元素的禁用属性处理Select2组件时，由于Select2会生成独立的DOM结构替代原生select，直接针对原生select或旧类名写CSS不会生效。以下是可行的解决方案：

1. 确保Select2同步禁用状态 #

虽然设置原生select的disabled属性后，Select2理论上会自动同步状态，但手动调用Select2的禁用方法能避免状态不同步的问题：

$('#myDiv input, select, checkbox, textarea').each(function () {
  $(this).prop("disabled", true);
  // 针对Select2组件同步禁用状态
  if ($(this).data('select2')) {
    $(this).select2('disable');
  }
});

2. 针对Select2的DOM结构写正确的CSS #

Select2在禁用时，会给其外层容器添加.select2-container--disabled类（新版本），你需要针对这个类下的交互元素设置光标样式：

/* 禁用状态下的Select2选择框区域 */
.select2-container--disabled .select2-selection {
  cursor: not-allowed;
  pointer-events: none; /* 彻底禁止点击交互 */
}

/* 若需要覆盖下拉菜单（禁用状态下通常不会弹出，可选） */
.select2-container--disabled .select2-dropdown {
  cursor: not-allowed;
}

旧版本兼容（Select2 3.x） #

如果你使用的是Select2旧版本，禁用类名可能是.select2-disabled，此时替换为以下CSS：

.select2-disabled .select2-choice {
  cursor: not-allowed;
  pointer-events: none;
}

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