hx-disable

Синтаксис

<button hx-post="/submit" hx-disable="this">Submit</button>

Значением этого атрибута может быть:

• Селектор CSS для элемента, который нужно отключить.
• this, чтобы отключить сам элемент
• closest <CSS selector>, чтобы найти ближайший родительский элемент или сам элемент, соответствующий заданному селектору CSS (например, closest fieldset отключит ближайший к элементу fieldset).
• find <CSS selector>, чтобы найти первый дочерний элемент, соответствующий заданному селектору CSS
• next, что соответствует element.nextElementSibling
• next <CSS selector>, чтобы просканировать DOM вперёд и найти первый элемент, соответствующий заданному селектору CSS (например, next button отключит ближайший следующий родственный элемент button)
• previous, что соответствует element.previousElementSibling
• previous <CSS selector>, чтобы просканировать DOM назад и найти первый элемент, соответствующий заданному селектору CSS (например, previous input отключит ближайший предыдущий родственный элемент input)

Вот пример кнопки, которая отключает себя на время выполнения запроса:

<button hx-post="/example" hx-disable="this">
    Post It!
</button>

Пока выполняется запрос, кнопке будет добавлен атрибут disabled, который предотвратит повторные нажатия.

Чтобы отключить несколько элементов, разделите селекторы запятыми.

Эта форма отключает текстовые поля и кнопки:

<form hx-post="/example" hx-disable="find input[type='text'], find button">
    <input type="text" placeholder="Type here...">
    <button type="submit">Send</button>
</form>

Используйте :merge, чтобы сохранить родительские селекторы и добавить новые:

<main hx-disable="#logout-button">
    ...
  <form hx-post="/example" hx-disable:merge="find input[type='text'], find button">
    <input type="text" placeholder="Type here...">
    <button type="submit">Send</button>
  </form>
</main>