Hello everyone,
I have a subscription page where people can subscribe to a different marketing list or click on Unsubscribe to unsubscribe from all the emails.
I require to grey out and lock my subscription list if someone clicks on unsubscribe.
Do you have a solution for that, Many Thanks
Elly
Hi Elly,
We couldn't change the color of checkbox element directly, it's limitation of browser.
But a workaround is that we could apply CSS filter to checkbox element, the final effect is very similar to changing background color.
1. Create a custom class with filter property inside style tag.
.disabled-list { filter: invert(90%) sepia(33%) saturate(6%) hue-rotate(314deg) brightness(94%) contrast(91%); }
The filter effect is similar to #ddd color.
2. In the original function,
add the class to subscription list checkbox elements when "unsubscribe" checkbox is checked,
remove the class from subscription list checkbox elements when "unsubscribe" checkbox is unchecked,
list1.classList.add("disabled-list");
list1.classList.remove("disabled-list");
Result from my demo:
To get a satisfied background color, you could convert hex color to filter parameters by the website below:
https://codepen.io/sosuke/full/Pjoqqp
Regards,
Clofly
Thank you so much Colfy, you are so amazing.
is it possible to change the color in same time as well, I need to make it grey when locked.
Hi Elly,
We could achieve it by code below:(paste it inside script tag)
MsCrmMkt.MsCrmFormLoader.on('afterFormLoad', function (event) { var unsubscribe = document.querySelectorAll("input[type=checkbox]")[3]; var list1 = document.querySelectorAll("input[type=checkbox]")[0]; var list2 = document.querySelectorAll("input[type=checkbox]")[1]; var list3 = document.querySelectorAll("input[type=checkbox]")[2]; unsubscribe.addEventListener('change', function (event) { if (event.target.checked) { list1.disabled = true; list2.disabled = true; list3.disabled = true; } else { list1.disabled = false; list2.disabled = false; list3.disabled = false; } }) });
Regards,
Clofly
André Arnaud de Cal...
291,965
Super User 2025 Season 1
Martin Dráb
230,817
Most Valuable Professional
nmaenpaa
101,156