Yii2: Как отключить или прочитать только виджет Select2? - PullRequest
Новая
       48

Yii2: Как отключить или прочитать только виджет Select2?

1 голос
/ 03 июня 2019

Я использую виджет на основе select2.github.io , и мне нужно, чтобы он был доступен только для чтения, чтобы пользователь мог видеть опцию выбора по умолчанию, но она не может быть изменена, и я думаю, что этот виджет не ' у меня нет этой опции.

Есть ли общее решение для любого виджета Select2? 

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

Ответы [ 3 ]

2 голосов
/ 04 июня 2019

Ну, есть опция с именем 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 и более поздние версии . Поэтому вам, возможно, придется сделать обходной путь добавления скрытого ввода для отключенного выбора, который содержит идентификатор для текущего выбранного параметра для отключенного выбора 2.

так что добавьте следующее к вашей форме, и вы готовы идти 

<?php echo $form->field($model, 'id_color')->hiddenInput() ?>
1 голос
/ 06 июня 2019

Используйте 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); }",
    ], 
]);
0 голосов
/ 06 июня 2019

Попробуйте метод 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>
...