hx-disabled-elt

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

• 要禁用的元素的 CSS 查询选择器。
• this 禁用元素本身
• closest <CSS selector> 它将找到与给定的 CSS 选择器匹配的最近的父元素或其自身（例如，closest fieldset 将禁用最接近的元素 fieldset）。
• find <CSS selector> 它将找到与给定的 CSS 选择器匹配的第一个子元素
• next 解析为 element.nextElementSibling
• next <CSS selector> 它将向前扫描 DOM 以查找与给定的 CSS 选择器匹配的第一个元素（例如，next button 将禁用最近的后续同级 button 元素）
• previous 解析为 element.previousElementSibling
• previous <CSS selector> 它将向后扫描 DOM 以查找与给定的 CSS 选择器匹配的第一个元素。（例如，previous input 将禁用最近的前一个同级 input 元素）

下面是一个按钮的示例，该按钮将在请求期间自行禁用：

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

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

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

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

笔记

• hx-disabled-elt 可以继承并放置在父元素上