jquery - 使用JQuery临时删除伪CSS

我有一个下拉列表，使用一些：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;
}

最佳答案

一个简单的toggleClass？

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