Как мне включить отключенную кнопку после того, как модераторы введут некоторый текст в текстовое поле, используя "hx-on`?

Я хочу отключить кнопку "Да" до тех пор, пока модераторы моего сайта Django не предоставят причину для запрета пользователей. Как только причина будет указана в textarea, кнопка "Да" будет включена.

Это распространенный шаблон, с которым я сталкивался при использовании React и Javascript, но поскольку я использую шаблоны HTML и Django для этого проекта, я хочу использовать HTMX для некоторой интерактивности. Я все еще новичок в использовании HTML, поэтому был бы признателен за некоторую помощь, спасибо!

Я просмотрел вопросы здесь и не нашел ответов на свой вопрос. Или я неправильно использую 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>

вот как вы можете отключить кнопку в textarea, хотя в шаблонах django htmx не поддерживает динамическую настройку атрибутов описанным способом:


<textarea
    class="form-control"
    aria-label="Reason for ban"
    name="reason-for-ban"
    hx-on:input="
        let btn = htmx.find('#yes-ban-this-user');
        if (this.value.trim()) {
            htmx.removeClass(btn, 'disabled');
        } else {
            htmx.addClass(btn, 'disabled');
        }
    ">
</textarea>

<button id="yes-ban-this-user" class="btn btn-danger disabled">Ban User</button>
Вернуться на верх