At some point I needed a form field disabled by a checkbox. Here's how I did it.
Today at work I was creating a form.
Here is what I came up with:
HTML Input Fields:
This is pretty basic.
What we are doing is feeding the function the ID of the checkbox field, and the ID of the form field we want to disable. When you check or uncheck the box, we call the toggle() function, which determines what action we took - if it is checked, we disable the form field, and if it is unchecked, we enable the form field.
If you want to accomplish the opposite (checked = enabled, unchecked = disabled), simply switch the disabled values in the function:
I haven’t done extensive testing as to whether this works across all browsers, but it seems to be working just fine in Firefox and Chrome.
Here’s a demo:
When this is checked, something is disabled