symfony2 + bootstrap 3 只读选择下拉菜单仍然可编辑答案

【问题标题】：symfony2 + bootstrap 3 readonly select dropdown still editablesymfony2 + bootstrap 3 只读选择下拉菜单仍然可编辑
【发布时间】：2015-03-01 15:20:00
【问题描述】：

我正在使用 symfony2 和 bootstrap 3，当我将 readonly 属性设置为表单字段时，它会变灰并且我有禁止光标但该字段仍然是可编辑的（在我的情况下是一个选择下拉菜单）。

readonly 属性适用于简单的文本字段，但不适用于选择。

如何确保用户无法单击选择并更改其值？

我不能使用“禁用”，因为我需要将值传递给表单。用jquery重写readonly属性也没有用。

我的表格：

            ->add('product', 'entity', array(
                    'label' => 'Produit',
                    'class' => 'AppBundle:MarketPlace\Product',
                    'read_only' => true,
                ))

【问题讨论】：

他们怎么还能改变呢？他们需要看到价值吗？
好吧，当单击选择控件时，会出现下拉菜单，他们只需选择另一个选项（即使它是灰色的）。他们需要查看值，我需要在发布表单时检索值。另外，这是集合的一部分，添加的元素不是只读的。似乎其他人也面临同样的问题，这里是法语 (developpez.net/forums/d38029/webmasters-developpement-web/…)
是否有禁用选择的条件？如果是这样，也许在你的表单构建器中测试这个条件，如果为真，则添加一个只读文本字段，如果不是，则选择？
好吧，我这里的产品是一个实体（oneToMany 及其父级）。所以我不能得到一个简单的文本字段，因为我会得到错误“预期的标量等），不是吗？
您可以通过制作 dataTransformer (symfony.com/doc/current/cookbook/form/data_transformers.html) 并在表单构建器中使用它来从实体中获取文本字段。

标签： php jquery forms twitter-bootstrap symfony

【解决方案1】：

为您的实体as explained in the doc创建一个数据转换器ProductToTextTransformer，然后在您的表单构建器中使用它，根据是否禁用选择的条件添加选择或只读文本：

     //...

     // this assumes that the entity manager was passed in as an option
     $entityManager = $options['em'];
     $transformer = new ProductToTextTransformer($entityManager);
     if ($condition_to_disabled_the_select){
       $builder->add('product', 'entity', array(
                'label' => 'Produit',
                'class' => 'AppBundle:MarketPlace\Product',
            ));
     }
     else{
        $builder->add(
            $builder->create('product', 'text', array('label' => 'Produit', 'read_only' => true))
                    ->addModelTransformer($transformer)
        );
     }

【讨论】：

好吧，我不能将隐藏字段用于 onetomany 实体属性，如果我将隐藏字段放在类中，第二个产品字段会覆盖第一个。似乎在这里不起作用。
我已经用我的其他评论 (stackoverflow.com/questions/27756626/…) 中的元素编辑了我的答案，它对你有用吗？
嗯，是的，它应该可以工作，尽管我更喜欢保留我觉得更轻的 JavaScript 解决方案。

【解决方案2】：

以下是有效的，但我不太喜欢它，我觉得它不像应该的那样干净：

<script>
    $(function(){
        $(':input[readonly]').each(function(){
            $(this)
                .hide()
                .parent().append('<p>' + $(this).find(":selected").text() + '</p>')
        })
        ;
    })
</script>

【讨论】：