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!


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>
⚠️ **GitHub.com Fallback** ⚠️