ปิดใช้งานแบบเลื่อนลงที่เลือก jquery

ฉันมี 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>ซึ่งจะปิดใช้งานการเลือกที่อยู่เบื้องหลังไม่ใช่สิ่งที่เลือกไว้ด้านบน ฉันเคยใช้การเพิ่ม div อื่นด้วยตัวเองโดยให้ high z-indexเป็นสีเทานอกกรอบ แต่ฉันคิดว่านี่น่าจะน่าเกลียดและมีปัญหา

ขอบคุณสำหรับความช่วยเหลือ!

คุณกำลังปิดใช้งานเฉพาะของคุณselectแต่ถูกเลือกจะแสดงเป็น divs และ spans เป็นต้นดังนั้นหลังจากปิดการใช้งานการเลือกของคุณคุณจะต้องอัปเดตปลั๊กอินเพื่อให้วิดเจ็ตที่เลือกถูกปิดใช้งานด้วย คุณสามารถลองวิธีนี้:

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

ในเวอร์ชันล่าสุดที่เลือกใช้งานliszt:updatedไม่ได้อีกต่อไป คุณต้องใช้chosen:updated:

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

นี่เป็นJSFiddle

PSL ถูกต้อง แต่ได้รับการอัปเดตตั้งแต่นั้นเป็นต้นมา

ใส่สิ่งนี้หลังจากที่คุณปิดใช้งาน:

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

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

งานนี้เป๊ะ !!!! @chosen v1.3.0

คุณสามารถลองสิ่งนี้:

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