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

Posted 2023-05-07

【中文标题】Yii2：如何禁用或只读 Select2 小部件？

【英文标题】：Yii2: How to disabled or readonly a Select2 widget?

【发布时间】：2019-10-19 05:57:50

【问题描述】：

我使用基于select2.github.io 的小部件，我需要它是只读的，以便用户可以看到默认选择选项，但它不能更改，我认为这个小部件没有此选项。

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

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

【参考方案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 属性 `was removed in 4.0 and higher versions。因此，您可能必须采取一种解决方法，为禁用的选择添加一个隐藏输入，该输入保存禁用的 select2 的当前选定选项的 id。

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

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

【参考方案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); ",
    ], 
]);

【参考方案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>

【参考方案4】：

对于 Select2，您可以将属性“只读”用于“选项”

'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
    ],
]);

【讨论】：

欢迎来到 ***。虽然此代码可能会解决问题，但包括解释如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请编辑您的答案以添加