禁用jquery選擇的下拉列表

Question

我有一個選擇div，我正在使用所選的jquery插件來設置樣式並添加功能（最值得注意的是，搜索）。 div看起來像這樣，

 <select data-placeholder="add a foobar" id="foobar" style="width: 350px;">
 <option value=""></option>
 </select>

我正在使用這樣選擇的插件，

 $('#foobar').chosen();

在加載某些AJAX時，我想禁用整個<select> div。 也許有這樣的事情，

 $('#foobar').disable()

或這個

 $('#foobar').prop('disabled', true)

我想你應該已經明白了。

關於如何做到這一點的任何想法？ 我已經嘗試了很多不同的東西，比如使用jquery慣用法來禁用東西，禁用<select> ，它只是禁用底層選擇，而不是在它上面選擇的東西。 我甚至使用手動添加另一個具有高z-index div來使盒子變灰，但我認為這可能是丑陋和錯誤的。

謝謝您的幫助！

Answer 1

您只是禁用了您的select ，但是選擇將其渲染為div和span等。因此，在禁用您的選擇后，您需要更新插件以禁用選擇窗口小部件。 你可以這樣試試：

$('#foobar').prop('disabled', true).trigger("liszt:updated");

//For non-older versions of chosen you would want to do:

$('#foobar').prop('disabled', true).trigger("chosen:updated");

我在這里找到了這些信息

小提琴

一旦你更新小部件，它所做的就是取消綁定插件上的點擊或其他事件，並將其不透明度更改為0.5。 因為div沒有真正的禁用狀態。

Answer 2

在所選的最新版本中， liszt:updated不再適用。 你需要使用chosen:updated ：

$(".chosen-select").attr('disabled', true).trigger("chosen:updated")

這是一個JSFiddle 。

Answer 3

PSL是正確的，但選擇后更新。

在執行禁用后將其放入：

$("#your-select").trigger("chosen:updated");

Answer 4

$('#foobar').prop('disabled', true).trigger("chosen:updated");

這完美!!!! @chosen v1.3.0

Answer 5

$("chosen_one").chosen({
  max_selected_options: -1
});

Answer 6

$(document).ready(function () {
    $("#foobar").chosen().on('chosen:showing_dropdown',function() {
            $('.chosen-select').attr('disabled', true).trigger('chosen:updated');
            $('.chosen-select').attr('disabled', false).trigger('chosen:updated');
            $('.search-choice-close').hide();
    });
    $('.search-choice-close').hide();
});