hx-disabled-elt reported as not working

[aral]

Reported as not working here for GET calls at least:

https://www.reddit.com/r/htmx/comments/18i514s/hxdisabledelt_not_working/

Will attempt to update this issue with a smaller test case when I get a moment.

[andryyy]

Make sure btn as ID is unique and then place the hx attribute on the upper level node like a wrapping div. Does it work then?

Not on toilette right now, but sitting on a couch with my mobile.

[aral]

Having though of it more hx-disabled-elt doesn’t really make sense with WebSocket calls as it’s not request-response. There is no response to wait for. Going to edit the title and leave open for the link to the GET-related issue.

[FeliciousX]

<fieldset hx-get="/form/new" hx-trigger="change" hx-target="#form-new" hx-swap="outerHTML" hx-disabled-elt="this">
  <ul role="radiogroup">
    <li>
      <input checked="checked" id="checkbox-agreed-1" name="agree" type="radio" value="1">
      <label for="checkbox-agreed-1">yes</label>
    </li>
    <li>
      <input id="checkbox-agreed-2" name="agree" type="radio" value="0">
      <label for="checkbox-agreed-2">no</label>
    </li>
  </ul>
</fieldset>

can confirm hx-disabled-elt does not add disabled attribute to the fieldset when the request is running

what's a good online tool to use to setup examples for ease of test/debugging of an issue?

[SkyLundy]

Suggestion by @andryyy worked for my case.

I replicated the issue on a post form and it looks like this is the culprit. I was able to get it to work using hx-disabled-elt with a CSS selector on a parent. Simplified example:

<!-- 'hx-disabled-elt' with CSS selector works -->
<form hx-post hx-disabled-elt="button[type=submit]">
  <input name="name" type="text">
  <input name="email" type="email">

  <!-- Using 'this' does not work -->
  <button type="submit" value="Submit" hx-disabled-elt="this">Submit</button>
</form>

Edit: The code posted by the Reddit user contains improper markup. The attribute is using double double-quotes for hx-get. Changing the contents of that attribute solves the issue.

<button id="btn" class="btn btn-primary">I should be disabled, but I'm not</button>
<hr />
<!-- Changed from "@Url.Page("15_TestPage")" -->
<button hx-get="@Url.Page('15_TestPage')"
        hx-trigger="every 2s"
        hx-swap="innerHtml"
        hx-disabled-elt="#btn"
        class="test">
    <img src="/img/jetbrains.png" />
</button>