如何使用hx-on在输入文本后启用Django站点中禁用的按钮？

需求与问题背景 #

在Django站点的封禁用户表单中，需要让"Yes"提交按钮默认处于禁用状态，仅当版主在textarea中输入封禁理由后才启用按钮。项目基于HTML和Django模板开发，希望通过HTMX实现纯前端交互，避免与服务器通信。此前尝试hx-on:input、hx-on:change事件未生效，hx-disabled-elt不符合纯前端交互的需求，相关方案多涉及服务器通信，不符合预期。

原代码如下：

<form method="POST">
      {% csrf_token %}
      <p>Please provide the reason for the ban.</p>
      <div class="input-group">
        <textarea
          class="form-control"
          aria-label="Reason for ban"
          name="reason-for-ban"
          hx-on:input="htmx.removeClass(htmx.find(#yes-ban-this-user), 'disabled')">
        </textarea>
      </div>
      <input
        type="submit"
        class="btn btn-danger w-100 mt-3 disabled"
        value="Yes" id="yes-ban-this-user"
      />
      <a
        href="{% url "user-profile" user.username %}"
        class="btn btn-secondary w-100 mt-1"
      >
        Cancel
      </a>
</form>

修正方案 #

问题核心在于两个细节：HTMX事件脚本中的ID选择器未加引号，且缺少内容清空时重新禁用按钮的逻辑。以下是修正后的完整代码：

<form method="POST">
    {% csrf_token %}
    <p>请输入封禁理由。</p>
    <div class="input-group">
        <textarea
            class="form-control"
            aria-label="封禁理由"
            name="reason-for-ban"
            hx-on:input="
                const btn = htmx.find('#yes-ban-this-user');
                if (this.value.trim().length > 0) {
                    htmx.removeClass(btn, 'disabled');
                    btn.disabled = false;
                } else {
                    htmx.addClass(btn, 'disabled');
                    btn.disabled = true;
                }
            "
        ></textarea>
    </div>
    <input
        type="submit"
        class="btn btn-danger w-100 mt-3 disabled"
        value="确认封禁"
        id="yes-ban-this-user"
        disabled
    />
    <a
        href="{% url "user-profile" user.username %}"
        class="btn btn-secondary w-100 mt-1"
    >
        取消
    </a>
</form>

关键说明 #

• ID选择器引号：htmx.find()的参数必须是字符串，因此ID需要添加单引号或双引号（如htmx.find('#yes-ban-this-user')），原代码缺少引号导致脚本执行报错。
• 双向状态控制：增加了内容为空时的判断逻辑，当用户清空textarea后，按钮会重新回到禁用状态，符合完整的交互流程。
• 原生disabled属性：除了操作CSS的disabled类，还同步设置按钮的原生disabled属性，仅靠CSS类无法阻止浏览器默认的表单提交行为，双管齐下才能确保按钮状态生效。

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