Как я могу изменить эту кнопку psuedo css в Javascript/JQuery

Question

Я нашел этот очень хороший стиль кнопки флажка (ссылка ниже) и пытался включить его и выключить с помощью jQuery. Раньше я не использовал много псевдоклассов, обычно добавляю «активный» класс.

https://proto.io/freebies/onoff/

мне нужна кнопка будет включаться или выключаться при загрузке страницы на основе ответа сервера, но я не могу показаться, чтобы манипулировать CSS, не нарушая его. Как я хотел активировать/деактивировать эту кнопку?

.onoffswitch { 
 
    position: relative; 
 
    width: 90px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
} 
 
.onoffswitch-checkbox { 
 
    display: none; 
 
} 
 
.onoffswitch-label { 
 
    display: block; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
    border: 2px solid #999999; 
 
    border-radius: 20px; 
 
} 
 
.onoffswitch-inner { 
 
    display: block; 
 
    width: 200%; 
 
    margin-left: -100%; 
 
    transition: margin 0.3s ease-in 0s; 
 
} 
 
.onoffswitch-inner:before, 
 
.onoffswitch-inner:after { 
 
    display: block; 
 
    float: left; 
 
    width: 50%; 
 
    height: 30px; 
 
    padding: 0; 
 
    line-height: 30px; 
 
    font-size: 14px; 
 
    color: white; 
 
    font-family: Trebuchet, Arial, sans-serif; 
 
    font-weight: bold; 
 
    box-sizing: border-box; 
 
} 
 
.onoffswitch-inner:before { 
 
    content: "ON"; 
 
    padding-left: 10px; 
 
    background-color: #34A7C1; 
 
    color: #FFFFFF; 
 
} 
 
.onoffswitch-inner:after { 
 
    content: "OFF"; 
 
    padding-right: 10px; 
 
    background-color: #EEEEEE; 
 
    color: #999999; 
 
    text-align: right; 
 
} 
 
.onoffswitch-switch { 
 
    display: block; 
 
    width: 18px; 
 
    margin: 6px; 
 
    background: #FFFFFF; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 56px; 
 
    border: 2px solid #999999; 
 
    border-radius: 20px; 
 
    transition: all 0.3s ease-in 0s; 
 
} 
 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
 
    margin-left: 0; 
 
} 
 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
 
    right: 0px; 
 
}

<div class="onoffswitch"> 
 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
 
    <label class="onoffswitch-label" for="myonoffswitch"> 
 
    <span class="onoffswitch-inner"></span> 
 
    <span class="onoffswitch-switch"></span> 
 
    </label> 
 
</div>

Answer 1

программно хотите, чтобы изменить состояние, не возиться с классами CSS,

Просто Oneliner с помощью JQuery:

$('#myonoffswitch').attr('checked', false); // turn off 
$('#myonoffswitch').attr('checked', true); // turn on 

http://jsfiddle.net/5eoujsm4/

анимированный обновление: http://jsfiddle.net/5eoujsm4/1/

Answer 2

Вы не можете удалить :before или :after селекторы с помощью JavaScript, потому что те правила CSS, которые вы сделали.

Вместо этого можно создать два отдельных классов для того, что вы хотите:

.start-state:before { 
    ... 
} 
.end-state:before { 
    ... 
} 

, а затем изменить JavaScript для:

$(document).ready(function() 
{ 
     $('.onoffswitch-inner').addClass('end-state').removeClass('start-state'); 
} 

В качестве альтернативы, вы можете добавить состояние по умолчанию :before в правиле .onoffswitch-inner CSS , а затем перезаписать его, добавив правило .onoffswitch-inner.active:before.

Это позволит вам сделать $('.onoffswitch-inner').toggleClass('active');.