htmx 2.0.2中hx-disabled-elt无法禁用按钮的问题求助

核心原因 #

普通HTML表单的默认提交行为不会触发htmx的属性逻辑，hx-disabled-elt只有在htmx接管请求处理流程时才会生效。

具体解决方案 #

方案1：让表单通过htmx处理提交

给表单添加htmx请求属性，让htmx接管提交行为，示例代码：

<form hx-post="/你的登录接口地址">
  <!-- 表单内的输入框等其他元素 -->
  <button type="submit"
          tags="prominent,login"
          class="btn btn-primary w-full"
          hx-disabled-elt="this">Sign In</button>
</form>

• hx-post：指定表单提交的后端接口地址，根据实际业务调整
• hx-disabled-elt="this"：表示点击后禁用当前按钮，这个写法是有效的

方案2：让按钮单独触发htmx请求

如果不需要表单的默认行为，可以直接给按钮添加htmx属性，同时修改按钮类型避免默认提交：

<button type="button"
        tags="prominent,login"
        class="btn btn-primary w-full"
        hx-post="/你的登录接口地址"
        hx-disabled-elt="this">Sign In</button>

验证检查项 #

• 确认htmx 2.0.2的脚本已正确引入页面
• 打开浏览器控制台，查看是否有htmx相关的错误提示（比如选择器无效）
• 若使用ID选择器（如#btn），需确保按钮的id属性与hx-disabled-elt的取值完全匹配

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