This repository has been archived by the owner on Sep 18, 2018. It is now read-only.
forked from twbs/bootlint
-
Notifications
You must be signed in to change notification settings - Fork 0
E021
cvrebert edited this page Oct 4, 2014
·
2 revisions
.active
class used without the checked
attribute (or vice-versa) in a button group using the button.js plugin
When using Bootstrap's button.js
jQuery plugin's radio-buttons-style or checkboxes-style button groups, you must ensure that the <label>
s of options which are preselected or prechecked when their DOM is loaded have the .active
class applied to them. Bootstrap will properly toggle the class in response to user interaction, however.
Wrong:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" checked /> Option 1 (pre-checked)
</label>
<label class="btn btn-primary active">
<input type="checkbox" /> Option 2 (not pre-checked)
</label>
</div>
Right:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked /> Option 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" /> Option 2 (not pre-checked)
</label>
</div>
Wrong:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1" checked /> Option 1 (preselected)
</label>
<label class="btn btn-primary active">
<input type="radio" name="options" id="option2" /> Option 2 (not preselected)
</label>
</div>
Right:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" checked /> Option 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" /> Option 2 (not preselected)
</label>
</div>
Bootlint-NG documentation wiki content is licensed under the CC BY 3.0 License, and based on Bootstrap's docs which are copyright Twitter, Inc. For the original Bootlint documentation this is a fork of, see https://github.com/twbs/bootlint/wiki.