nonaktifkan dropdown yang dipilih jquery

88

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!

javascript jquery jquery-chosen gideonit
sumber

Jawaban:

152

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.

PSL
sumber
Sepertinya ada kesalahan ketik liszt:updated, bukankah seharusnya `list: diupdate?
lanoxx
1
lisztmemang benar, tapi sekarang chosen:updatedadalah cara yang tepat untuk melakukannya.
Kaleb Anderson
Saran: Anda mungkin perlu menentukan versi terbaru dari kode pertama kali dalam jawaban Anda karena banyak pengguna akan menggunakan versi terbaru. Saya menggunakan liszt:updateddan tidak berfungsi karena tidak berfungsi di versi baru.
Beruntung
.trigger("chosen:updated");Ini juga berfungsi untuk mengaktifkan atau menonaktifkan, misalnya jika Anda memanggilnya lagi dalam suatu fungsi.
Arena V.
$ ('# foobar option: not (: selected)'). prop ('disabled', true) .trigger ("selected: updated"); akan menonaktifkan item lain di dropbox kecuali item yang dipilih.
Asad Naeem
51

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

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

Ini JSFiddle .

Orlando
sumber
7

PSL benar, tetapi dipilih telah diperbarui sejak itu.

Letakkan ini setelah Anda melakukan penonaktifan:

$("#your-select").trigger("chosen:updated");
Pavan Katepalli
sumber
6 
$('#foobar').prop('disabled', true).trigger("chosen:updated");

Ini bekerja dengan sempurna !!!! @zainal

pengguna2877913
sumber
1

Anda dapat mencoba ini:

$("#foobar").prop('disabled',true).trigger("chosen:updated").chosen('destroy').chosen()
ruvi
sumber
0 
$("chosen_one").chosen({
  max_selected_options: -1
});
Andrew Nodermann
sumber
0 
$(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();
});
boateng
sumber