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 均能正常顯示。