hx-disabled-elt

The hx-disabled-elt attribute allows you to specify elements that will have the disabled attribute added to them for the duration of the request. The value of this attribute can be:

• A CSS query selector of the elements 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 first button element that follows this element in the document)
• 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 first input element that precedes this element in the document)

Or a comma-separated list of the above options (except for this).

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

<button hx-post="/example" hx-disabled-elt="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-disabled-elt 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 id="myForm" hx-post="/example" hx-disabled-elt="#myForm input[type='text'], #myForm button">
    <input type="text" placeholder="Type here...">
    <button type="submit">Send</button>
</form>

Note that you can also use the inherit keyword to inherit parent values for a disabled elements and add additional disabled elements:

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

Notes

• hx-disabled-elt is inherited and can be placed on a parent element