Drew Peer Drew Peer - 6 months ago 45
jQuery Question

temporary css changes by javascript

I am using a custom toggle switch on my website, which can be switched ON or OFF. Depending if it is ON or OFF (checked or unchecked) there are different

CSS
classes applying to the switch and changing the style.

I want to turn this toggle switch on / off using javascript. However a change of the status "checked / unchecked" does not make a change. This leads to me having to adjust the
CSS
style of the switch to turn it e.g. OFF.

However, this leads to the problem now. When I change the
CSS
using javascript, I basically add styles to the element directly. This leads to the normal toggle switch
CSS
not working anymore as the element style overrides any class style. If i assign an additional class to the switch , the normal style overrides the class. using
!important
is not an option, as it stay permanently OFF / ON

Is there any way to apply
CSS
to an element, without automatically disabling the default
CSS
style changes?
like setting a
CSS
style until the next normal change happens?

HTML

<div class="onoffswitch active" id="recurringdiv">
<p>Recurring</p>
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked="">
<label class="onoffswitch-label" for="myonoffswitch" data-click-state="0" id="recurringfield">
<span class="onoffswitch-inner custom1"></span>
<span class="onoffswitch-switch custom2"></span>
</label>
</div>


JS

$(document).ready(function() {
$('.onoffswitch-label').on('click', function() {
if ($(this).attr('data-click-state') == 1) {
$(this).attr('data-click-state', 0)
/*Click State 1 finish*/
} else {
$(this).attr('data-click-state', 1)
/*Click State 2 finish*/
}
});
});

<!-- This is the autopay -->
$(document).ready(function() {
$('.auto-onoffswitch-label').on('click', function() {
if ($(this).attr('data-click-state') == 1) {
$(this).attr('data-click-state', 0)
/*Click State 1 finish*/
} else {
$(this).attr('data-click-state', 1)
/*Click State 2 finish*/
}
});
});


CSS

.auto-onoffswitch-checkbox:checked + .auto-onoffswitch-label .auto-onoffswitch-switch {
right: 0px;
}
.auto-onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid #a9a9a9;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}

Tom Tom
Answer

If you cannot change the status of the element using CSS/ normal jquery I would recommend using a click event.

if (condition == true) {
jQuery(".onoffswitch-switch").trigger('click');
}

Its simple and should do the trick