Allow disable-element extension to disable multiple elements

src/ext/disable-element.js

@@ -5,12 +5,14 @@ htmx.defineExtension('disable-element', {
     onEvent: function (name, evt) {
         let elt = evt.detail.elt;
         let target = elt.getAttribute("hx-disable-element");
-        let targetElement = (target == "self") ? elt : document.querySelector(target);
+        let targetElements = (target == "self") ? [ elt ] : document.querySelectorAll(target);
 
-        if (name === "htmx:beforeRequest" && targetElement) {
-            targetElement.disabled = true;
-        } else if (name == "htmx:afterRequest" && targetElement) {
-            targetElement.disabled = false;
+        for (var i = 0; i < targetElements.length; i++) {
+            if (name === "htmx:beforeRequest" && targetElements[i]) {
+                targetElements[i].disabled = true;
+            } else if (name == "htmx:afterRequest" && targetElements[i]) {
+                targetElements[i].disabled = false;
+            }
         }
     }
 });

test/ext/disable-element.js

@@ -59,4 +59,32 @@ describe("disable-element extension", function() {
         btn2.disabled.should.equal(false);
     });
 
-});
+    it('disables multiple elements during htmx request', function () {
+        this.server.respondWith("GET", "/test", function (xhr) {
+            xhr.respond(200, {})
+        });
+        var btn = make('<button class="should-be-disabled" hx-get="/test" hx-ext="disable-element" hx-disable-element=".should-be-disabled">Click Me!</button>')
+        var btn2 = make('<button class="should-be-disabled">Should be disabled</button>')
+        var btn3 = make('<button>Should NOT be disabled</button>')
+        btn.disabled.should.equal(false);
+        btn2.disabled.should.equal(false);
+        btn3.disabled.should.equal(false);
+
+        // WHEN clicking
+        btn.click();
+
+        // THEN the first two are disabled, but the last one isn't
+        btn.disabled.should.equal(true);
+        btn2.disabled.should.equal(true);
+        btn3.disabled.should.equal(false);
+
+        // WHEN server response has arrived
+        this.server.respond();
+
+        // THEN all buttons are back enabled
+        btn.disabled.should.equal(false);
+        btn2.disabled.should.equal(false);
+        btn3.disabled.should.equal(false);
+    });
+
+});

www/content/extensions/disable-element.md

@@ -22,3 +22,10 @@ This extension disables an element during an htmx request, when configured on th
 <button hx-get="/whatever" hx-ext="disable-element" hx-disable-element="#to-disable">Click me</button>
 <button id="to-disable">Watch me being disabled</button>
 ```
+
+### Disabling multiple elements
+```html
+<button hx-get="/whatever" hx-ext="disable-element" hx-disable-element=".to-disable">Click me</button>
+<button class="to-disable">Watch me being disabled</button>
+<button class="to-disable">Watch me being disabled also</button>
+```