jquery-chosen 드롭 다운 비활성화


88

선택한 jquery 플러그인 을 사용하여 스타일을 지정하고 기능을 추가 하는 선택 div가 있습니다 (특히 검색). 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를 수동으로 추가하는 데 의지 했지만 이것은 추악하고 버그가 많을 것이라고 생각합니다.

도와 주셔서 감사합니다!

답변:


152

당신은 단지 당신의을 비활성화 select하고 있지만 selected는 그것을 div 및 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에 대한 실제 비활성화 상태가 없기 때문입니다.


에 오타가있는 것 같습니다.`list liszt:updated: updated?
lanoxx 2015

1
liszt옳았지만 지금 chosen:updated은 적절한 방법입니다.
Kaleb Anderson 2016

제안 : 많은 사용자가 최신 버전을 사용하기 때문에 답변에서 첫 번째 코드의 최신 버전을 지정해야 할 수 있습니다. liszt:updated새 버전에서 작동하지 않기 때문에 사용 하고 작동하지 않았습니다.
럭키

.trigger("chosen:updated");예를 들어 함수에서 다시 호출하는 경우 활성화 또는 비활성화하는 역할도합니다.
Arenas V.

$ ( '# foobar option : not (: selected)'). prop ( 'disabled', true) .trigger ( "chosen : updated"); 선택한 항목을 제외하고 보관 용 계정의 다른 항목을 비활성화합니다.
Asad Naeem

51

선택한 최신 버전에서 liszt:updated더 이상 작동하지 않습니다. 다음을 사용해야합니다 chosen:updated.

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

다음은 JSFiddle 입니다.


7

PSL은 정확했지만 그 이후로 선택되었습니다.

비활성화를 한 후에 이것을 넣으십시오.

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

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

이것은 완벽하게 작동합니다 !!!! @chosen v1.3.0


1

이것을 시도 할 수 있습니다.

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


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();
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.