I've created two checkboxes that enable dark mode. I have one that is in the mobile navigation and one in the desktop navigation.
At 800px, the mobile checkbox becomes display:none and the desktop checkbox becomes display:block and vice versa before 800px.
If I begin on desktop, enable dark mode and go to mobile, the mobile checkbox is not checked and when I do check it, light mode works but the desktop checkbox is now referring to the opposite.
I am currently trying to take both checkboxes and mark them ':checked' when the input is clicked.
Is my issue, the fact that you cannot mark a checkbox checked when it is display:none and not currently in the DOM?
$(document).ready(function() {
$('input[type="checkbox"]').on('click', () => {
$('body').toggleClass('darkMode');
$('mobile-checkbox').is(':checked');
$('desktop-checkbox').is(':checked');
});
});.darkMode {
background-color: black;
}
.mobile {
display: inline-block;
box-shadow: 5px 5px 5px blue;
}
.desktop {
display: none;
box-shadow: 5px 5px 5px green;
}
@media (min-width:800px) {
.mobile {
display: none;
}
.desktop {
display: inline-block;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="mobile">
<input class="mobile-checkbox" type="checkbox">
</div>
<div class="desktop">
<input class="desktop-checkbox" type="checkbox">
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire