CODEWITHSUNDEEP
jqueryhtmlcss
joetinger
joetinger

Reputation: 2729

Temporarily Remove pseudo CSS with JQuery

I have a dropdown list that uses some :before and :after pseudo CSS to create a arrow. When a checkbox is checked this dropdown becomes disabled and everything turns lightgray except for the :before and :after pseudo CSS they stay the original colors. I know what needs to be disabled in the CSS I'm just unsure how to do this so the CSS will return to normal if the checkbox is unchecked.

Current Code which currently doesn't remove the :before and :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 to create arrows

.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;
}

Upvotes: 0

Views: 182

Answers (1)

keypaul
keypaul

Reputation: 497

A simple toggleClass?

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

Upvotes: 1

Related Questions