E021

Note: This check has been removed in Bootlint v1.x.

---

E021

.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>