select2插件的disabled功能详解

最近做项目用到了select2插件，需求中需要给下拉框设置默认值之后，禁用下拉框，我开始的写法是这样的：

<select class="js-example"></select>
<script type="text/javascript">
$(function(){
$(".js-example").select2();
$(".js-example").val("CA").trigger("change");   //设置默认值
$(".js-example").prop("disabled", true);        //设置下拉框不可用
});
</script>

这个写法在 Chrome Firefox IE11 的显示如下，下拉框变成了不可用状态



但是在IE7、IE8、IE9、IE10 仍然是可用状态。

下面说最重要的部分，我把代码稍微修改一下，IE就都正常了，正确的代码如下：

<select class="js-example"></select>
<script type="text/javascript">
$(function(){
$(".js-example").select2();
$(".js-example").val("CA").trigger("change");   //设置默认值
});
$(".js-example").prop("disabled", true);        //设置下拉框不可用
</script>

如你所看到的，调整了一下 禁用下拉框的代码 的位置。

注意下面这段代码的位置，一定要写在select框下面，并且不要写在 $(function(){}); 中

$(".js-example").prop("disabled", true);

经过测试，这段代码在 Chrome Firefox IE7-IE11 均能正常显示。