Yii2：如何禁用或只读 Select2 小部件？

Question

我使用了一个基于select2.github.io的小部件，我需要它是只读的，这样用户才能看到一个默认的选择选项，但它不能改变，我认为这个小部件没有这个选项。

是否有任何 Select2 小部件的通用解决方案？

$form->field($model, 'id_color')->widget(Select2::classname(), [
    'items' => ['1' => 'blue', '2' => 'red', '3' => 'yellow']
])

Answer 1

好吧，有一个名称为disabled的选项，它可以作为true或false传递，从而导致呈现禁用的选择或启用。

<?php echo $form->field($model, 'id_color')->widget(Select2::classname(), [
        'items' => ['1' => 'blue', '2' => 'red', '3' => 'yellow']
        'pluginOptions' => [
            'disabled' => true
        ]
    ]);
?>

但是，在使用它之前，您应该知道禁用的输入不会作为 post 数组的一部分与表单一起提交，并且readonly属性` 在 4.0 和更高版本中被删除。 因此，您可能必须采取一种解决方法，为禁用的选择添加隐藏输入，该输入保存禁用的 select2 的当前选定选项的 id。

所以将以下内容添加到您的表单中，您就可以开始了

<?php echo $form->field($model, 'id_color')->hiddenInput() ?>

Answer 2

使用 pluginEvents 来禁用。

$form->field($model, 'id_color')->widget(Select2::classname(), [
    'data' => ['1' => 'blue', '2' => 'red', '3' => 'yellow'],
    'options' => ['class' =>'myclass'],
    'pluginEvents' => [
        "select2:opening" => "function() { $('.myclass').attr('disabled', true); }",
    ], 
]);

Answer 3

如果您愿意，请尝试 CSS 方法。

<?= $form->field($model, 'id_color')->widget(Select2::classname(), [
    'data' => ['1' => 'blue', '2' => 'red', '3' => 'yellow'],
    'readonly' => true,
]); ?>


<style type="text/css">
select[readonly].select2-hidden-accessible + .select2-container {
  pointer-events: none;
  touch-action: none;

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

  .select2-selection__arrow,
  .select2-selection__clear {
    display: none;
  }
}
</style>

Answer 4

对于 Select2，您可以将属性 'readonly' 用于 'options'

'options' => [
    'readonly' => true
],

例如

echo $form->field($model, 'sazba')->widget(Select2::classname(), [
    'data' => $listData,
    'options' => [
        'placeholder' => '--- Vyberte ---',
        'multiple' => false,
        'class' => 'hide',
        'id' => 'all_sazba',
        'value' => $model->sazba,
        'readonly' => true
    ],
    'pluginOptions' => [
        'allowClear' => true
    ],
]);