Question

如何动态地将select2组合框设为只读？

这是我到目前为止所尝试的内容：

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

Answer 1

来自Select2 - Issue #3387 - Readonly Support的解决方案：

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;
  }
}

Answer 2

这是使用select2的最新4.0.7（经css only测试）的解决方案

/*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 3

见：http://select2.github.io/select2/
我做到了：
$("#modelname-fieldname").select2({disabled:readonly});
这里：
- modelname-fieldname如下：$form->field($modelname, "fieldname")->widget(Select2::classname(), [ ... ]);
- readonly是真还是假..
可选，您必须在将鼠标悬停在select2字段

上时更改光标

Answer 4

这对我有用： .select2（“ readonly”，true）; .select2（“ readonly”，false）;

Answer 5

下面的例子对我有用

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

Answer 6

这是 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 7

disabled 属性不是好方法，使用此属性的 HTML 元素会阻止提交表单时选择的数据发送。

对于生产模式，我必须找到并编写解决方案...它适用于 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' ); }
});

我已经用完整的演示详细说明了它here。

Answer 8

我正在使用Select 4.0，这对我来说很好

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

Select2 - 从js开始只读（不禁用！）

8 个答案: