Thymeleaaf中设置属性值实现动态控制select是否可选

女爷i 2023-10-18 20:13 8阅读 0赞

## 场景 ##

在新增时select可以下拉选择，

在编辑时select不可以下拉选择。

所以需要动态控制其disabled属性。

### 注意 ###

使其禁用时：disabled="disabled"

使其启用时：disabled="false"

### 效果 ###

![Image 1][]![20190620171239621.gif][]

## 实现 ##

注：

通过th:attr 可以设置属性值。

这里设置disabled属性值，左边是属性名，右边是属性值，属性值又是一个EL表达式，此EL表达式又是一个选择表达式。

如果refundOrder != null，那么就是编辑，所以最终渲染成disabled="disabled"。

否则就是新增，最终渲染成disabled="false"

完整示例代码：

<select class="form-control" name="businessInitiator"  id="businessInitiator"  th:attr="disabled=${refundOrder != null?'disabled':'false'}" >
                                                <option  id="yuanliaoInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '原料立库'}" value="原料立库"><span th:text="原料立库"></span></option>
                                                <option  id="qingjieInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '清洁车间'}" value="清洁车间"><span th:text="清洁车间"></span></option>
                                                <option  id="zhengjiInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '正极车间'}" value="正极车间"><span th:text="正极车间"></span></option>
                                                <option  id="fujiInitiator" th:selected="${refundOrder != null && refundOrder.businessInitiator != null && refundOrder.businessInitiator  == '负极车间'}" value="负极车间"><span th:text="负极车间"></span></option>
                                                <option value="" disabled th:selected="${refundOrder == null || refundOrder.businessInitiator == null}" hidden>选择退货发起方</option>
                                            </select>

[Image 1]: 
[20190620171239621.gif]: https://img-blog.csdnimg.cn/20190620171239621.gif