Gibt es keine Möglichkeit, dies rein über CSS zu tun?

Question

ich diese CSS-Regel haben ...

input[checked="false"] + label {opacity: .6} 

Für diesen HTML ...

<input type="checkbox" checked="true" name="whatever" value="whatever" id="whatever"> 
<label for="whatever">Whatever</label> 

Und ich würde denken, dass, wie ich sie aktivieren oder deaktivieren, es undurchsichtig oder halb werden würde -transparent. Allerdings, stellt sich heraus, Attribut ändert sich nicht, wenn das DOM element.checked tut, da das ehemalige ist einfach die Standardwert.

Als solche habe ich es mit ein wenig JavaScript Bootstrap ...

document.getElementById('whatever').addEventListener('change', toggleChecked, false); 
function toggleChecked() { 
    this.setAttribute('checked', this.checked); 
} 

Grundsätzlich meine Frage ist, ob dies erforderlich ist oder nicht. Gibt es eine Möglichkeit, den Stil des Labels nur über CSS zu ändern, basierend auf dem Checked-or-Not-Status seiner Checkbox?

Answer 1

Es gibt die :checked CSS3 pseudo class, aber es funktioniert nicht auf Internet Explorer (mindestens Version 8 und darunter).

input:checked + label {opacity: .6}