033. hx-disable（HTMXの「魔法」を一時的に解く）

原理：聖域と、通信中の保護

HTMXを「効かせない」場所を作る

HTMXの素晴らしいところは、親要素に hx-boost や hx-target を書いておけば、その中の子要素すべてに魔法が自動で引き継がれる（継承される）ことです。

しかし、時には「ここは特別に、HTMXに触ってほしくない」「このボタンだけは従来通りのページ遷移をさせたい」あるいは「今は通信中だから、これ以上のボタン操作をさせたくない」という場面が出てきます。

hx-disable（ディセーブル）属性は、指定した要素とその内側にあるすべての要素から、HTMXの魔法を一時的に、あるいは恒久的に取り去るための「バリア」です。

効力の停止

これを書かれた要素は、たとえ hx-get や hx-boost の支配下にあったとしても、HTMXとしての動作を一切やめます。 - インタラクティブな動きが止まる。 - インジケーター（読み込み中表示）が動かなくなる。 - まるでHTMXを導入していない、素のHTMLの状態に戻ります。

実践：魔法の支配から逃れる

1. 特定のリンクだけ「普通の遷移」をさせる

サイト全体を hx-boost で爆速化しているけれど、このリンクボタンだけはページをリロードして（リフレッシュして）飛んでほしい場合です。

<body hx-boost="true">

    <nav>
        <a href="/faq">FAQ（高速更新）</a>

        <!-- hx-disable を付けることで、
             このリンクだけは通常の重たいページ遷移になります -->
        <a href="/logout" hx-disable>ログアウト（再読み込み）</a>
    </nav>

</body>

2. 外部ライブラリとの競合を避ける

JavaScriptの特別な地図ライブラリやグラフライブラリを使っている場所など、HTMXが勝手に入れ替えると困る「聖域」を守るために使います。

<div id="complex-chart" hx-disable>
    <!-- ここはHTMXが一切干渉しないため、他のJSライブラリが自由に動けます -->
</div>

3. ステップ・バイ・ステップ解説

範囲の特定: 「ここだけは何かがおかしい」「HTMXの動きが邪魔をしている」と感じるエリアを特定します。
バリアの設置: そのエリアの親要素に hx-disable とだけ書き込みます（値は不要です）。
確認: ブラウザでその要素を操作し、HTMXとしての通信や更新が行われなくなったことを確認してください。

比較：属性の削除 vs hx-disable

属性を一つずつ消す

<a href="/a">  <!-- hx-boost="true" は削除済み -->
<a href="/b">  <!-- ひとつひとつ手作業で... -->

親要素から継承されている場合、子要素の属性を一つずつ削除するのは大変ですし、ミスの元です。

HTMXの hx-disable

一箇所に書くだけで、その配下すべてを一度に「素のHTML」の状態へ戻せます。いわば「魔法の解呪（デスペル）」です。

まとめ：初心者のための「聖域」の作り方

hx-disable は、HTMXという強力な武器を「あえて使わない」という選択をするための、大人の属性です。

デバッグの相棒に: 挙動が怪しいときに hx-disable を付けてみて、問題が解決するなら「HTMXの何かが悪さをしている」というヒントになります。
連携をスムーズに: 他の複雑なJavaScript（Reactの小さなパーツなど）を同居させるときには、この属性で干渉を防いであげるのが優しさです。
自由の確保: すべてを魔法で解決しようとせず、時には「普通のHTML」の良さを活かす余地を残しておきましょう。

万能の力には、それを止める術も必要です。hx-disable を使って、あなたのWebアプリの中に、自由で安全な「聖域」を確保してください。次の記事では、通信中にユーザーを待たせずにボタンを無効化する、より実践的な hx-disabled-elt（034. hx-disabled-elt）をご紹介します。