---
title: "hx-disable"
description: "Disables elements during request"
---

The `hx-disable` attribute adds `disabled` to selected elements during requests.

## Syntax

```html
<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](https://developer.mozilla.org/docs/Web/API/Element/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](https://developer.mozilla.org/docs/Web/API/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](https://developer.mozilla.org/docs/Web/API/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:

```html
<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](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled),
which will prevent further clicks from occurring.

Separate selectors with commas to disable multiple elements.

This form disables text inputs and buttons:

```html
<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:

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