Docs: add indeterminate disabled checkbox example (#36674)

diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index 66ef949f7432644550cbf8a8ae51fd51c88fdb84..640ff85c589f7feddaa8724b878e791eb810b2a5 100644 (file)
--- 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 5c7ab52616ca4c77cfca2fbe4bebe6d07e826488..12f8b00d1c4555eb6d800a94048124ddfc664357 100644 (file)
--- 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">