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>

请注意，您还可以使用 inherit 关键字来继承父元素的禁用元素值，并添加额外的禁用元素 CSS 选择器：

<main hx-disabled-elt="#logout-button">
    ...
  <form hx-post="/example" hx-disabled-elt="inherit, find input[type='text'], find button">
    <input type="text" placeholder="Type here...">
    <button type="submit">Send</button>
  </form>
</main>

注意事项

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