Skip to content

Add documentation for multiple CSS selectors in hx-disabled-elt #2421

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

Merged
1cg merged 1 commit into from
Mar 21, 2024
Merged

Add documentation for multiple CSS selectors in hx-disabled-elt #2421

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
9 changes: 9 additions & 0 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 @@ -21,6 +21,15 @@ Here is an example with a button that will disable itself during a request:
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.

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 a button and a text input field during the request:

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

## Notes

* `hx-disable-elt` is inherited and can be placed on a parent element