Skip to content

Docs: Clarify behavior and examples of hx-disabled-elt in the docs #3522

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LincolnPuzey wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Docs: Clarify behavior and examples of hx-disabled-elt in the docs #3522

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions www/content/attributes/hx-disabled-elt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ description = """\
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 element to disable.
* A CSS query selector of the elements 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
Expand All @@ -21,6 +21,8 @@ added to them for the duration of the request. The value of this attribute can b
* `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:

```html
Expand All @@ -36,14 +38,14 @@ The `hx-disabled-elt` attribute also supports specifying multiple CSS selectors
elements during the request. Here is an example that disables buttons and text input fields of a particular form during the request:

```html
<form hx-post="/example" hx-disabled-elt="find input[type='text'], find button">
<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 element CSS selectors:
disabled elements:

```html
<main hx-disabled-elt="#logout-button">
Expand Down