web-dev-qa-db-ja.com

jquery-chosenドロップダウンを無効にする

chosen jquery plugin を使用してスタイルを設定し、機能を追加する（特に検索）ための選択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を追加してボックスをグレーアウトすることさえしましたが、これはくてバグがあると思われます。

助けてくれてありがとう！

javascriptjqueryjquery-chosen
80
gideonite

selectのみを無効にしますが、選択するとdivやspanなどとしてレンダリングされます。したがって、選択を無効にした後、プラグインを更新して選択ウィジェットも無効にする必要があります。あなたはこの方法を試すことができます：

$('#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には実際の無効状態はないため。

135
PSL

選択した最新バージョンでは、liszt:updatedは機能していません。 chosen:updatedを使用する必要があります：

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

JSFiddle です。

44
Orlando

PSLは正しかったが、その後選択されたものは更新された。

無効化を行った後にこれを置きます：

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

これは完璧です!!!! @chosen v1.3.0

4
user2877913
$(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();
});
0
boateng
$("chosen_one").chosen({
  max_selected_options: -1
});
0
Andrew Nodermann