desabilitar o menu suspenso escolhido pelo jquery

Eu tenho um div select que estou usando o plugin jquery escolhido para estilizar e adicionar recursos (mais notavelmente, pesquisa). O div é parecido com isto,

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

E estou usando o plugin escolhido como este,

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

Enquanto alguns AJAX estão carregando, eu gostaria de desativar todo o <select>div. Talvez com algo assim,

 $('#foobar').disable()

ou isto

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

Acho que você entendeu.

Algumas ideias em como fazer isso? Eu tentei uma série de coisas diferentes, como usar expressões idiomáticas jquery para desabilitar coisas, desabilitando o <select>que apenas desabilita o select subjacente, não as coisas escolhidas em cima dele. Eu até recorri à adição manual de outro div com um alto z-indexpara apenas tornar a caixa cinza, mas eu acho que isso é provavelmente feio e cheio de erros.

Obrigado pela ajuda!

Você está desabilitando apenas o seu select, mas escolhido o renderiza como divs e spans, etc. Portanto, após desabilitar sua seleção, você precisa atualizar o plug-in para tornar o widget de seleção desabilitado também. Você pode tentar desta forma:

$('#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");

Eu encontrei a informação aqui

Violino

Depois de atualizar o widget, tudo o que ele faz é desvincular o clique ou outros eventos do plug-in e alterar sua opacidade para 0,5. Como não existe um estado real desativado para um div.

Na última versão do escolhido, liszt:updatednão está mais funcionando. Você precisa usar chosen:updated:

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

Aqui está um JSFiddle .

O PSL estava correto, mas o escolhido foi atualizado desde então.

Coloque isso depois de fazer a desativação:

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

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

Isso funciona perfeito !!!! @chosen v1.3.0

Você pode tentar isto:

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

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

$(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();
});