diff options
| author | Julien Déramond <julien.deramond@orange.com> | 2022-07-06 08:43:38 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-07-06 08:43:38 +0300 |
| commit | 6cf72530ed31bc69ed9fa6168bb7629a48cf8884 (patch) | |
| tree | 9f26f05c9b84967fd4b574f903247b948cc3e941 | |
| parent | 22c7503c887b016c4cf3b118a73b00881619b6d6 (diff) | |
Docs: add indeterminate disabled checkbox example (#36674)
| -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 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"> |