Hi all,
I would like to disable a checkbox in a form, so that the user cannot check it. Can you please help me?
I tried to uncheck the checkbox automatically when it is clicked with the below custom code but it doesn’t seem to work:
$('.checkbox-disabled').on('click', function(){
if($(this).checked) {
$(this).prop("checked", false);
}
})
I also tried this but with no success neither:
$(“#ID-TO-DISABLE ”).prop(‘disabled’, true);
Thanks in advance for your help!
samliew
(webflowexpert.com)
December 4, 2017, 3:06am
2
If you don’t want the user to check a box, then it should either be hidden or disabled.
Sure that it the purpose of my question, can you please indicate me how to disable it? Thank you!
Matthew_O
(Matthew Oliver)
December 4, 2017, 7:24am
4
I believe what he meant was try changing the checkbox to: display setting: none in the webflow designer. It’ll be at the top of your styles page.
Thank you for your reply, I need to keep it visible but uncheckable. Do you have any other ideas?
samliew
(webflowexpert.com)
December 4, 2017, 8:20am
6
Yes paste this in your page footer code:
<script>
$('.checkbox-disabled').attr('disabled', true);
</script>
Demo: Edit fiddle - JSFiddle - Code Playground
Also, feel free to contact me for further code help and/or customization of third-party plugins
1 Like
Thank you for your help! There must be something I do wrong as it still doesn’t work.
I have tried to put the code in the page settings (inside tag) and also in an ‘Embed’ component at the bottom of the page but I can still check the checkbox after publishing.
The name of the style applied to the checkbox is ‘checkbox-disabled’ as in the code.
samliew
(webflowexpert.com)
December 6, 2017, 1:11am
10
Put it in Page Footer Code. Embed code component is for advanced users only.
I saw your recommendation in your earlier messages, but in the page settings I can only insert code in the head and body tags. Can you please guide me to insert code in the page footer?
samliew
(webflowexpert.com)
December 6, 2017, 6:10am
12
Before </body> tag
field is the page footer.
Thank you, it works, this was just because I didn’t put the <script></script>
tags around the code…