Question

我有一个下拉列表，它使用一些：before和：after伪CSS来创建一个箭头。当选中一个复选框时，此下拉列表将被禁用，除了：before和：after伪CSS之外，所有内容都变为淡绿色，它们保持原始颜色。我知道CSS中需要禁用的内容我只是不确定如何执行此操作，因此如果未选中该复选框，CSS将恢复正常。

当前代码，目前不删除：before和：after 的 JQuery的

$('#checkBox').click(function () {
        if ($("#checkBox").is(":checked")) {
            $('#dropDown')
                .prop('disabled', true)
                .removeClass('dropdown')
                .addClass('dropdownDisabled')
                .val("");
        }
        else {
             $('#dropDown')
                .prop('disabled', false);
            }
});

CSS

.dropdown:disabled {
    box-shadow:none;
}

.dropdownDisabled:before {
    content:none;
}
.dropdownDisabled:after {
    content:none;
}

用于创建箭头的CSS

.dropdown:before {
    content: "";
    position: absolute;
    right: 10px;
    top: 8px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
}

.dropdown:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 3px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #333;
}

Answer 1

一个简单的toggleClass？

$('#checkBox').click(function () {
    if ($("#checkBox").is(":checked")) {
        $('#dropDown')
            .toggleClass('dropdownDisabled')
            .prop('disabled', true)
            .val("");
    }
    else {
         $('#dropDown')
            .toggleClass('dropdownDisabled')
            .prop('disabled', false);
        }
});

暂时使用JQuery删除伪CSS

1 个答案: