diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 35fa6d8..b7ece40 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -421,6 +421,13 @@ table.items select:focus-visible {
 .centered {
   margin: 0 auto;
 }
+[disabled] {
+  border-color: var(--color-border-gray) !important;
+  color: var(--color-border-gray) !important;
+  cursor: not-allowed;
+  fill: var(--color-border-gray) !important;
+  pointer-events: none;
+}
 .unwrappable {
   white-space: nowrap;
 }
diff --git a/app/javascript/application.js b/app/javascript/application.js
index df4b762..5f9a581 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -2,6 +2,24 @@
 import "@hotwired/turbo-rails"
 
 function showPage(event) {
-  document.documentElement.style.visibility="visible";
+  document.documentElement.style.visibility="visible"
+}
+document.addEventListener('turbo:load', showPage)
+
+
+Turbo.StreamActions.disable = function() {
+  this.targetElements.forEach((e) => {
+    e.setAttribute("disabled", "disabled")
+    e.setAttribute("aria-disabled", "true")
+    e.setAttribute("tabindex", "-1")
+  })
+}
+
+Turbo.StreamActions.enable = function() {
+  this.targetElements.forEach((e) => {
+    e.removeAttribute("disabled")
+    e.removeAttribute("aria-disabled")
+    // 'tabindex' is not used explicitly, so removing it is safe
+    e.removeAttribute("tabindex")
+  })
 }
-document.addEventListener('turbo:load', showPage);
diff --git a/config/initializers/turbo_stream_actions.rb b/config/initializers/turbo_stream_actions.rb
new file mode 100644
index 0000000..17b90a7
--- /dev/null
+++ b/config/initializers/turbo_stream_actions.rb
@@ -0,0 +1,9 @@
+ActiveSupport.on_load :turbo_streams_tag_builder do
+  def disable(target)
+    action :disable, target
+  end
+
+  def disable_all(targets)
+    action_all :disable, targets
+  end
+end