hx-disabled-elt

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

• 要禁用的元素的CSS选择器
• this 表示禁用元素本身
• closest <CSS选择器> 将查找与给定CSS选择器匹配的最近祖先元素或自身（例如closest fieldset将禁用离元素最近的fieldset）
• find <CSS选择器> 将查找匹配给定CSS选择器的第一个子代元素
• next 解析为element.nextElementSibling
• next <CSS选择器> 将在DOM中向前扫描查找第一个匹配给定CSS选择器的元素（例如next button将禁用紧随其后的button元素）
• previous 解析为element.previousElementSibling
• previous <CSS选择器> 将在DOM中向后扫描查找第一个匹配给定CSS选择器的元素（例如previous input将禁用最近的前一个input元素）

以下是一个按钮在请求期间禁用自身的示例：

<button hx-post="/example" hx-disabled-elt="this">
    提交!
</button>

当请求进行时，这将导致按钮被标记disabled属性，从而防止再次点击。

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

<form hx-post="/example" hx-disabled-elt="find input[type='text'], find button">
    <input type="text" placeholder="在此输入...">
    <button type="submit">发送</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="在此输入...">
    <button type="submit">发送</button>
  </form>
</main>

注意事项

• hx-disabled-elt 具有继承性，可以放置在父元素上