Looks like I'll have to study up on my *basic* JS, cause I use plenty of server-side fields for those pesky Canadians
Admittedly, "basic" is pretty ambiguous with JavaScript, as copy-and-pasting buggy code seems to constitute "intermediate" JS knowledge on some resumes I've seen.
Anyway, check this demo: MktoForms2 :: Opt-In Client Side (an expansion of an earlier example). Here, the Opt-In checkbox is contained within a Rich Text area and doesn't have a corresponding server-side field in Marketo, but it still must be checked for the form to submit.
In the optInDefaultsByCountry object, you set any special defaults by country. Here, I've configured it so:
Obviously there are other ways to manage the widget interactions, but this gives a few ideas for how inputs that only exist client-side can add needed functionality.
When I selected Canada on your form the Opt-in Checkbox remained unchecked.
What browser were you using for this test? It should be unchecked for Canada. The design is that it is forcibly unchecked for Canada (requiring manual intervention) otherwise forcibly checked. Works even on IE 8 for me.
I'm not crazy about the UX, though. I would feel better if the checkbox weren't displayed at all if the lead had not yet chosen a country. The fact that you can see it going from unchecked to checked is a bit too literal for me.