728x90
반응형
1. 역할에 해당하는 체크박스 구현
listRoles : 모든 역할
tl : 계정에 해당하는 역할
th:checked 가 중요했음.
<th:block th:each="role: ${listRoles}" th:with="tl=${account.roleList}, r=${role.id}">
<input type="checkbox" th:checked="${#lists.contains(tl, role)}"
th:text="${role.name}" th:value="r" class="m-2" />
</th:block>
2. bootstrap-toggle 사용
- node_modules 이동해서 npm install bootstrap-toggle 실행
https://www.bootstraptoggle.com/#usage
Bootstrap Toggle
offstyle string "default" Style of the off toggle.Possible values are:default,primary,success,info,warning,danger Refer to Bootstrap Button Options documentation for more information.
www.bootstraptoggle.com
<th:block th:each="role: ${listRoles}" th:with="tl=${account.roleList}, r=${role.id}">
<td class="align-middle border-top-0">
<input type="checkbox" th:checked="${#lists.contains(tl, role)}"
data-toggle="toggle"
data-onstyle="primary"
data-style="slow"
data-width="80" data-height="50"
class="m-2"
th:value="r"/>
</td>
</th:block>
728x90
반응형