Sha256: fae6648d5fe274c0797b5cc3fd5b294d69ea5708cd7d63cd0bfab9c8a05a881d

Contents?: true

Size: 1.78 KB

Versions: 1

Compression:

Stored size: 1.78 KB

Contents

# Checkbox

Für Checkboxen ist in HTML das Tag `<input type="checkbox">` vorgesehen. Da es für Checkboxen bisher keine Möglichkeit gibt, ihnen mit einfachen CSS-Mitteln ein angemessenes Aussehen zu verleihen kommt Javascript zum Einsatz. Zunächst sollte über die Klasse `.form-checkbox` der Checkbox das Grundgerüst verliehen werden. Ein jQuery-Plugin sorgt nun für die nötige Modifikation:

```javascript
$('.form-checkbox').checkbox()
```

<div class="tc-example" role="application">
  <fieldset class="form-fieldset">
    <legend>Gruppen Beschriftung</legend>
    <div class="form-checkbox-set">
      <label>
        <input type="checkbox" name="cb0" value="0" class="form-checkbox">foo
      </label>
    </div>
    <div class="form-checkbox-set">
      <label>
        <input type="checkbox" name="cb1" value="1" class="form-checkbox" checked>bar
      </label>
    </div>
    <div class="form-checkbox-set">
      <label>
        <input type="checkbox" name="cb2" value="2" class="form-checkbox" disabled>Inaktiv
      </label>
    </div>
  </fieldset>
</div>

```html
<fieldset class="form-fieldset">
  <legend>Gruppen Beschriftung</legend>
  <div class="form-checkbox-set">
    <label>
      <input type="checkbox" name="cb0" value="0" class="form-checkbox">foo
    </label>
  </div>
  <div class="form-checkbox-set">
    <label>
      <input type="checkbox" name="cb1" value="1" class="form-checkbox" selected>bar
    </label>
  </div>
  <div class="form-checkbox-set">
    <label>
      <input type="checkbox" name="cb2" value="2" class="form-checkbox" checked>Inaktiv
    </label>
  </div>
</fieldset>
```

<div class="tc-note">
**Anmerkung:**
Werden Checkboxen dynamisch via Javascript oder über einen Ajax-Call
hinzugefügt, muss das Plugin explizit auf die neuen Elemente angewand werden.
</div>

Version data entries

1 entries across 1 versions & 1 rubygems

Version Path
doc-msp-theme-0.1.0 _sass/_checkbox.md