Нет ли способа сделать это исключительно через CSS?

Question

У меня есть это правило CSS ...

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

Для этого HTML ...

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

И я бы подумал, что когда я проверяю или снимаю флажок, он становится непрозрачным или полупрозрачным. Однако , оказывается, атрибут checked="true не меняется, когда DOM element.checked делает, поскольку первый просто значение по умолчанию .

Как таковой, я загрузил его с небольшим количеством JavaScript ...

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

По сути, мой вопрос заключается в том, необходимо ли это или нет. Есть ли способ изменить стиль метки только с помощью CSS, основываясь на статусе флажка или нет его флажка?

Answer 1

Существует псевдокласс :checked CSS3 , но он не работает в Internet Explorer (по крайней мере, версия 8 и ниже).

input:checked + label {opacity: .6}