diff options
| -rw-r--r-- | site/assets/js/snippets.js | 4 | ||||
| -rw-r--r-- | 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 66ef949f7..640ff85c5 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 5c7ab5261..12f8b00d1 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"> |