Select2 - 從 js 使其只讀（未禁用！）

Question

如何動態地將 select2 combobox 設為只讀？

這是我到目前為止所嘗試的：

$('...').attr({'readonly': 'readonly'}).trigger('change.select2');
$('...').attr({'readonly': 'readonly'}).trigger('change');
$('...').select2().enable(false);

Answer 1

這是css only的最新select2 (Tested With 4.0.7 ) 的解決方案

/*Select2 ReadOnly Start*/
    select[readonly].select2-hidden-accessible + .select2-container {
        pointer-events: none;
        touch-action: none;
    }

    select[readonly].select2-hidden-accessible + .select2-container .select2-selection {
        background: #eee;
        box-shadow: none;
    }

    select[readonly].select2-hidden-accessible + .select2-container .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
        display: none;
    }

/*Select2 ReadOnly End*/

Answer 2

見： http ://select2.github.io/select2/

我這樣做了：

$("#modelname-fieldname").select2({disabled:'readonly'});

在哪里：

• modelname-fieldname如下： $form -> field($modelname, "fieldname") -> widget(Select2::classname(), [ ... ]);
• readonly為 true、false 或字符串readonly

或者，您可以在將鼠標懸停在select2字段上時更改光標。

Answer 3

Select2 的解決方案 - 問題 #3387 - 只讀支持：

select[readonly].select2 + .select2-container {
  pointer-events: none;
  touch-action: none;

  .select2-selection {
    background: #eee;
    box-shadow: none;
  }

  .select2-selection__arrow,
  .select2-selection__clear {
    display: none;
  }
}

編輯：對於版本> 4.07 - 正如下面的評論者正確指出的那樣：

select[readonly].select2-hidden-accessible + .select2-container {
    pointer-events: none;
    touch-action: none;

    .select2-selection {
        background: #eee;
        box-shadow: none;
    }

    .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
        display: none;
    }
}

Answer 4

這對我有用：

.select2("readonly", true);
.select2("readonly", false);

Answer 5

disabled屬性不是好辦法， 使用該屬性的 HTML 元素可以防止在提交表單時發送 select 的數據。

對於生產模式，我必須找到並編寫一個解決方案......它適用於 select 的本機readonly屬性！ 在這里，應用於具有 Select2 機制的 DOM 中的所有選擇：

$('select[data-select2-id]').on('select2:opening', function (e) {
    if( $(this).attr('readonly') == 'readonly') { // Check if select tag is readonly.
        //console.log( 'readonly, can't be open !' );
        e.preventDefault();
        $(this).select2('close'); 
        return false;
    }
    //else{ console.log( 'expandable/selectable' ); }
});

我在這里用一個完整的演示詳細說明了它。

Answer 6

下面的例子對我有用

$("#mySelect2Box").select2("readonly", true);

Answer 7

這是jsfiddle中的一個工作示例

這是使用的腳本

    var $S1 = $("select[name=select1]");
    var $S2 = $("select[name=select2]");
  
  $('select').select2({
      width: '100%'
    });

    function readonly_select(objs, action) {
      if (action === true)
        objs.prepend('<div class="disabled-select"></div>');
      else
        $(".disabled-select", objs).remove();
    }
    $('#setreadonly').on('click', function() {
      //readonly_select($(".select2"), true);

      $S1.attr("readonly", "readonly");
   
        $S2.attr("readonly", "readonly");

    });
    $('#removereadonly').on('click', function() {
      //readonly_select($(".select2"), false);
    
        $S1.removeAttr('readonly');
    $S2.removeAttr('readonly');

    });
    $("#abc").on('submit', function() {
      alert($("#abc").serialize());
    });

Answer 8

您不能根據新版本將 select2 設為只讀

按照黑客的鏈接，它的純 css

https://stackoverflow.com/a/55001516/9945426

Answer 9

我正在使用 Select 4.0，這對我來說效果很好

$('#select2-element').on('select2:select', () => {
  $('#select2-element').data('select2').destroy();
  $('#select2-element').attr('readonly', true);
});