hx-disabled-elt.md

+++ title = "hx-disabled-elt" description = """
The hx-disabled-elt attribute in htmx allows you to specify elements that will have the disabled attribute added
to them for the duration of the request.""" +++

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

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