205
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.
Share
Report
All responses (
Answers (
.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
#1
André Arnaud de Cal...
292,516
Super User 2025 Season 1
#2
Martin Dráb
231,407
Most Valuable Professional
#3
nmaenpaa
101,156
