E021 - Herst/bootlint-ng GitHub Wiki
Note: Below is the original page from the Bootlint documentation, some of the info here might not apply to Bootlint-NG!
.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>