jquery - 将 Checkbox 变成图标 IE9+

Question

我想把一个复选框变成一个图标，当你点击时，它变成红色，然后当你再次点击时又变回灰色。这适用于所有现代浏览器(IE 除外)。

我已经玩了一段时间，这是我得到的结果(在 IE 中查看):

http://jsfiddle.net/d67uyfn7/1/

<input class="edit-hours" name="staff.Locked" type="checkbox" ng-model="staff.Locked" id="editHours" ng-show="!isSharedLink && selectedProject.Project.IsDraft" />

作为引用，这是它应该的外观/功能(在 Chrome 中查看):

http://jsfiddle.net/twnc27rj/

<input class="edit-hours" name="staff.Locked" type="checkbox" ng-model="staff.Locked" id="editHours" ng-show="!isSharedLink && selectedProject.Project.IsDraft" />

有什么建议吗？谢谢!

Answer 1

尝试使用复选框输入和标签组合:http://jsfiddle.net/n0owcmrt/ . JavaScript 不是必需的。

HTML:

<input type = "checkbox" id = "togglePen" />
<label for = "togglePen"></label>

CSS:

input[type = "checkbox"] {
    display: none;
}

label {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: white 
                url('http://i.imgur.com/JOEqZaH.png')
                no-repeat;
    cursor:pointer;
}

input[type = "checkbox"]:checked + label {
    background-image: url('http://i.imgur.com/nJyPSJr.png');
}