暫時使用JQuery刪除僞CSS

Question

我有一個下拉列表，它使用了一些：之前和之後：僞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); 
     } 
});