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 是继承的，可以放在父元素上