I am utilizing Bootstrap 4 features and some custom settings in my elements.
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-selector make-active">
<input type="radio" name="options">A
</label>
<label class="btn btn-outline-selector">
<input type="radio" name="options">B
</label>
<label class="btn btn-outline-selector">
<input type="radio" name="options">C
</label>
<label class="btn btn-outline-selector">
<input type="radio" name="options">D
</label>
</div>
Upon page load, I want one of the labels to have the active class, but the browser removes it quickly. This issue persists even after trying to set the class using JavaScript.
Is there a way to ensure an active element maintains its status on page load?
It would be ideal to establish this active status on the server.
Update: It seems that Bootstrap may be causing this issue.
if (activeElement) {
$(activeElement).removeClass(CLASS_NAME_ACTIVE);
}