From 6cf72530ed31bc69ed9fa6168bb7629a48cf8884 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <julien.deramond@orange.com>
Date: Wed, 6 Jul 2022 07:43:38 +0200
Subject: [PATCH] Docs: add indeterminate disabled checkbox example (#36674)

---
 site/assets/js/snippets.js                   | 4 +++-
 site/content/docs/5.2/forms/checks-radios.md | 8 +++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index 66ef949f74..640ff85c58 100644
--- a/site/assets/js/snippets.js
+++ b/site/assets/js/snippets.js
@@ -102,7 +102,9 @@
   // Indeterminate checkbox example in docs and StackBlitz
   document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
     .forEach(checkbox => {
-      checkbox.indeterminate = true
+      if (checkbox.id.includes('Indeterminate')) {
+        checkbox.indeterminate = true
+      }
     })
 
   // -------------------------------
diff --git a/site/content/docs/5.2/forms/checks-radios.md b/site/content/docs/5.2/forms/checks-radios.md
index 5c7ab52616..12f8b00d1c 100644
--- a/site/content/docs/5.2/forms/checks-radios.md
+++ b/site/content/docs/5.2/forms/checks-radios.md
@@ -49,7 +49,13 @@ Checkboxes can utilize the `:indeterminate` pseudo class when manually set via J
 
 Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
 
-{{< example >}}
+{{< example class="bd-example-indeterminate" stackblitz_add_js="true" >}}
+<div class="form-check">
+  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
+  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
+    Disabled indeterminate checkbox
+  </label>
+</div>
 <div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
   <label class="form-check-label" for="flexCheckDisabled">