如何将Select2设为只读而非禁用？ASP.NET Core场景遇失效问题

数据老陈

2026-6-27

Select2设置只读不生效的原因及解决方法

为什么你尝试的两种方法无效？

原生HTML的<select>标签不支持readonly属性，浏览器会直接忽略这个设置，所以$('select').prop('readonly',true)完全起不到作用。
Select2本身没有内置的readonly方法，官方文档里的相关描述可能针对旧版本或存在误导，调用$('select').select2('readonly',true)自然不会生效。

可行的解决方案

方案1：模拟只读状态（保留值提交能力）

通过禁用Select2的交互行为、隐藏搜索框并添加禁用样式，实现视觉和功能上的只读效果：

// 初始化或重新配置Select2，隐藏搜索框
$('select').select2({
    minimumResultsForSearch: Infinity, // 隐藏搜索框
    // 保留你原有的其他配置项
});

// 阻止下拉展开
$('select').on('select2:opening', function(e) {
    e.preventDefault();
});

// 添加禁用样式，让UI看起来是只读状态
$('.select2-container').addClass('select2-container--disabled');

方案2：用disabled配合隐藏域提交值

如果倾向于用disabled，可通过添加同名隐藏域来传递值（因为disabled的表单元素不会被提交）：

var $targetSelect = $('select');
var currentValue = $targetSelect.val();

// 禁用下拉框
$targetSelect.prop('disabled', true);
// 添加同名隐藏域，把当前值传入
$targetSelect.after(`<input type="hidden" name="${$targetSelect.attr('name')}" value="${currentValue}">`);