htmx 4.0 is under construction — migration guide

hx-disable

Disable elements during request

The hx-disable attribute allows you to specify elements that will have the disabled attribute added to them for the duration of the request.

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.

The hx-disable attribute also supports specifying multiple CSS selectors separated by commas to disable multiple elements during the request. Here is an example that disables buttons and text input fields of a particular form during the request:

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

Note that you can also use the merge modifier to merge parent values for a disabled elements and add additional disabled element CSS selectors:

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