如何使用Thymeleaf实现表单的条件显示功能

问题原因及解决方案 #

首先你当前表单始终可见的直接原因是display属性取值错误：display没有hidden这个有效值，要隐藏元素需要用display: none，hidden是visibility属性的可选项，这是样式不生效的核心问题。
如果要实现纯Thymeleaf、无需JS的点击显示编辑框、提交后展示保存结果的效果，你可以通过URL参数传递编辑状态来实现互斥渲染，调整后的代码如下：

<td>
  <!-- 默认显示文本链接，有编辑参数且匹配当前ticket id时隐藏 -->
  <a th:href="@{/当前页面路径(edit=${ticket.id})}" th:if="${param.edit != ticket.id.toString()}">
    <span th:text="${ticket.pickUpId != null ? ticket.pickUpId : 'N/A'}"></span>
  </a>

  <!-- 匹配到编辑参数时显示表单，默认隐藏 -->
  <form th:action="@{/updatePickupId/{id}(id=${ticket.id})}"
        th:method="post"
        th:if="${param.edit == ticket.id.toString()}">
      <div class="checkbox-list w-150px">
          <input type="text" name="pId" th:value="${ticket.pickUpId}"
              placeholder="Pick Up Id"
              th:classappend="${ticket.pickedUp} ? 'required' : ''">
          <input type="submit" value="Save"/>
      </div>
  </form>
</td>

逻辑说明 #

• 代码里的/当前页面路径替换为你当前列表页面的实际访问路径即可。
• 页面默认没有edit参数时，所有行都展示文本链接：已存取件ID就展示ID，没有就展示N/A，点击链接会将当前行ticket.id作为edit参数带到当前页面URL，刷新后触发对应行的编辑状态。
• 当URL的edit参数值等于当前行的ticket.id时，该行隐藏文本链接、显示编辑表单，其他行仍保持文本展示状态。
• 后端updatePickupId接口处理完保存逻辑后，重定向回原列表页面（不带edit参数），页面就会自动渲染刚保存的取件ID，完成提交后的状态切换。
• 原有代码里把<span>和<form>嵌套在<a>标签内属于无效HTML结构，会导致点击事件/提交逻辑异常，调整后拆分了两个互斥渲染的模块，符合HTML规范。

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