nonaktifkan dropdown yang dipilih jquery

Saya memiliki div pilih yang saya gunakan plugin jquery yang dipilih untuk mengatur gaya dan menambahkan fitur (terutama, pencarian). Div terlihat seperti ini,

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

Dan saya menggunakan plugin yang dipilih seperti ini,

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

Saat beberapa AJAX sedang dimuat, saya ingin menonaktifkan seluruh <select>div. Mungkin dengan hal seperti ini,

 $('#foobar').disable()

atau ini

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

Saya pikir Anda mengerti.

Ada ide tentang bagaimana melakukan ini? Saya telah mencoba sejumlah hal yang berbeda, seperti menggunakan idiom jquery untuk menonaktifkan sesuatu, menonaktifkan <select>yang hanya menonaktifkan pemilihan yang mendasarinya, bukan hal yang dipilih di atasnya. Saya bahkan terpaksa menambahkan div lain secara manual dengan tinggiz-index ke hanya abu-abu di luar kotak, tetapi saya pikir ini cenderung jelek dan buggy.

Terima kasih untuk bantuannya!

Anda hanya menonaktifkan Anda select, tetapi memilih menjadikannya sebagai div, dan span, dll. Jadi setelah menonaktifkan pilihan Anda, Anda perlu memperbarui plugin agar widget pemilihan juga dinonaktifkan. Anda bisa mencoba cara ini:

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

Saya menemukan informasinya di sini

Biola

Setelah Anda memperbarui widget, yang dilakukannya hanyalah melepaskan klik atau peristiwa lain pada plugin dan mengubah opasitasnya menjadi 0,5. Karena tidak ada status dinonaktifkan nyata untuk div.

Di versi terakhir yang dipilih, liszt:updatedtidak berfungsi lagi. Anda perlu menggunakan chosen:updated:

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

Ini JSFiddle .

PSL benar, tetapi dipilih telah diperbarui sejak itu.

Letakkan ini setelah Anda melakukan penonaktifan:

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

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

Ini bekerja dengan sempurna !!!! @zainal

Anda dapat mencoba ini:

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