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">
    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 可以繼承，並且可以放置在父元素上