如果文件已使用 thymeleaf 上传，如何禁用 href 标签答案

【问题标题】：how to disable href tag if file is already uploaded using thymleaf如果文件已使用 thymeleaf 上传，如何禁用 href 标签
【发布时间】：2021-06-02 18:17:08
【问题描述】：

我正在使用 th:disabled 并且它正在禁用按钮但仍然可以点击，这是我到目前为止所做的 thymeleaf 代码。当用户完成申请的最终提交时，我想禁用文件上传按钮。为此，我正在检查这种情况： th:disabled="${lst.finalSubmit !=null}"

这是截图：(https://prnt.sc/10cny2t)

<div class="card-body" id="myDIV" onblur="chekforblank()">
    <table id="TblGrievance" class="table table-striped table-bordered"
        style="width: 100%">
        <thead>
            <tr class="bg-secondary">
                <!-- <th>Sn.</th> -->
                <th>Reference Number</th>
                <th>Grievance Date</th>
                <th>Phone NO</th>
                <th>Status</th>
                <th>Action</th>
                <!-- <th>&nbsp;</th> -->
            </tr>

            <tr th:each="lst : ${dto}" id="ll">
                <th th:text="${lst.refno}"></th>
                <th th:text="${lst.finalSubmit}"></th>
                <th th:text="${lst.phoneOfOrg}"></th>
                <th th:text="${lst.complaintStatus}"></th>
                
                <td>&nbsp;&nbsp;&nbsp;
                        
                        <a th:href="@{/uploadDraft/{id}(id=${lst.refno})}" title="You have already Uplaoded your docmuents"><button
                class="btn btn-primary" th:disabled="${lst.finalSubmit !=null}">File Upload</button></a>
                        
                    <a th:href="@{/viewComplaint/{refno}(refno=${lst.refno})}"><i
                        class="fa fa-list-alt fa-2x" aria-hidden="true"></i></a></td>
        </thead>
        <tbody>


        </tbody>
    </table>
</div>

【问题讨论】：

我不确定您所说的“它正在禁用按钮但仍可点击”是什么意思。如果您的意思是当您将鼠标悬停在按钮上时光标会改变形状，那么您可以使用合适的样式来控制它 - 例如：<button class="btn btn-primary" disabled="true" style="cursor: auto;">File Upload</button>。作为 CSS 类而不是嵌入式样式会更好 - 但这是一个快速演示。如果这不是你的意思，那么你能edit你的问题并澄清问题吗？

标签： javascript java spring-boot thymeleaf

【解决方案1】：

这行代码有问题...

<a th:href="@{/uploadDraft/{id}(id=${lst.refno})}" title="You have already Uplaoded your docmuents">
    <button class="btn btn-primary" th:disabled="${lst.finalSubmit !=null}">File Upload
    </button>
</a>

您尝试禁用的按钮包含在锚标记中。当您的按钮被 Thymeleaf 禁用时，周围的链接仍然有效，并且该按钮是可点击的，即使它看起来已禁用。要修复它，您首先应该阅读按钮的 Disabled state 上的 Bootstrap 文档。 Bootstrap 允许将按钮显示为 <button> 或 <a> 标签。请注意有关禁用<a> 标签的重要说明，其中主要的是...

<a>s 不支持 disabled 属性，因此您必须添加 .disabled 类以使其在视觉上显示为已禁用。

阅读后选择您想为上传按钮使用什么标签，例如，如果您想使用<a> 标签，您的代码可能看起来像...

<a th:href="@{/uploadDraft/{id}(id=${lst.refno})}" title="You have already Uplaoded your docmuents" 
class="btn btn-primary" th:classappend="${lst.finalSubmit !=null}? 'disabled'">File Upload</a>

【讨论】：