hx-disable

Syntax

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

The value of this attribute can be:

• A CSS query selector of the element to disable.
• this to disable the element itself
• closest <CSS selector> which will find the closest ancestor element or itself, that matches the given CSS selector (e.g. closest fieldset will disable the closest to the element fieldset).
• find <CSS selector> which will find the first child descendant element that matches the given CSS selector
• next which resolves to element.nextElementSibling
• next <CSS selector> which will scan the DOM forward for the first element that matches the given CSS selector (e.g. next button will disable the closest following sibling button element)
• previous which resolves to element.previousElementSibling
• previous <CSS selector> which will scan the DOM backwards for the first element that matches the given CSS selector. (e.g. previous input will disable the closest previous sibling input element)

Here is an example with a button that will disable itself during a request:

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

When a request is in flight, this will cause the button to be marked with the disabled attribute, which will prevent further clicks from occurring.

Separate selectors with commas to disable multiple elements.

This form disables text inputs and buttons:

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

Use :merge to keep parent selectors and add more:

<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>