求助：如何用Thymeleaf实现Bootstrap Dual Listbox选项的条件禁用

没问题，这事儿很简单，咱们直接利用Thymeleaf的条件属性绑定就能搞定。你只需要在<option>标签里加上th:disabled属性，根据is_generated的值来决定是否添加禁用状态。

修改后的代码如下：

<form id="chargeslistformid" method="post" action="#" th:action="@{/savechargeslist}" th:object="${wrpAssignCharges}">
    <label>
        <select id="selectBox" multiple="multiple" name="selectedChargesList" class="selectpicker form-control">
            <!-- 关键就是这里新增的th:disabled属性 -->
            <option th:each="charge:${chargeslist}"
                    th:value="${charge.pkAssignId}"
                    th:text="${charge.chargeName}"
                    th:selected="${previouslist.contains(charge)}"
                    th:disabled="${charge.is_generated}">
            </option>
        </select>
    </label>
    <br/>
    <button id="chargeslistbtnid" th:type="submit" class="btn btn-info">Next</button>
</form>

原理说明： #

Thymeleaf对布尔类型的属性有特殊处理：当th:disabled的值为true时，它会自动渲染成disabled="disabled"（HTML标准的禁用属性写法）；如果值为false，这个属性就不会出现在最终的HTML里。这样刚好符合你的需求——当is_generated=true时，对应选项就会被禁用，用户无法选择。

Bootstrap Dual Listbox会自动识别这些带有disabled属性的选项，把它们设置为不可选状态，完全不需要额外的JS处理~

内容的提问来源于stack exchange，提问作者Vignesh R