hx-disabled-elt

hx-disabled-elt 属性允许你指定在请求期间将添加 disabled 属性的元素。此属性的值可以是：

¥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:

• 要禁用的元素的 CSS 查询选择器。

  ¥A CSS query selector of the element to disable.

• this 禁用元素本身

  ¥this to disable the element itself

• closest <CSS selector> 将查找与给定 CSS 选择器匹配的 closest 祖级元素或其自身（例如，closest fieldset 将禁用最接近元素 fieldset 的元素）。

  ¥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> 将查找与给定 CSS 选择器匹配的第一个子后代元素

  ¥find <CSS selector> which will find the first child descendant element that matches the given CSS selector

• next 解析为 element.nextElementSibling

  ¥next which resolves to element.nextElementSibling

• next <CSS selector> 将向前扫描 DOM 以查找与给定 CSS 选择器匹配的第一个元素（例如，next button 将禁用最近的后续兄弟 button 元素）

  ¥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 解析为 element.previousElementSibling

  ¥previous which resolves to element.previousElementSibling

• previous <CSS selector> 将向后扫描 DOM 以查找与给定 CSS 选择器匹配的第一个元素。（例如 previous input 将禁用最近前兄弟元素 input 元素)

  ¥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:

<button hx-post="/example" hx-disabled-elt="this">
    Post It!
</button>

当请求正在进行时，这将导致按钮标记为 disabled 属性，这将阻止进一步的点击。

¥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.

hx-disabled-elt 属性还支持指定多个用逗号分隔的 CSS 选择器，以在请求期间禁用多个元素。以下是在请求期间禁用特定表单的按钮和文本输入字段的示例：

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

注释

¥Notes

• hx-disabled-elt 是继承的，可以放在父元素上

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