Disable a checkbox

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!

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!

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?

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.

Link to page???

http://test-checkbox-disabled.webflow.io/ (for the checkbox UE 2)

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?

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… :sweat: