hx-disabled-elt

hx-disabled-elt 属性は、リクエストの期間中に disabled 属性が追加される要素を指定できます。この属性の値は次のとおりです。

• 無効にする要素の CSS クエリセレクタ。
• 要素自体を無効にする this
• 指定された CSS セレクタと一致する、最も近い祖先要素または要素を検索する closest <CSS セレクタ> (例: closest fieldset は要素に最も近い fieldset を無効にします)。
• 指定された CSS セレクタと一致する最初の子孫要素を見つける find <CSS セレクタ>
• element.nextElementSibling に解決される next
• 指定された CSS セレクタと一致する最初の要素を DOM から順にスキャンする next <CSS セレクタ> （例: next button は最も近い次の兄弟の button 要素を無効にします）
• element.previousElementSibling に解決される previous
• 指定された CSS セレクタと一致する最初の要素を DOM から逆順にスキャンする previous <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 は継承され、親要素に配置できます。