Today at work I was creating a form. I’m not a big JavaScript buff, but one of my tasks was to use a checkbox to toggle a form field between “enabled” and “disabled”. So, after browsing the web for a solution, I decided it would be simpler to roll up my sleeves and get dirty writing my own function.

Here is what I came up ... Read More »]]> EDIT: First and foremost I am a small business web consultant. If you are a small business owner or know a small business owner, be sure to check out my new blog series called The Small Business Website Guide for Small Business Owners or follow me on Twitter or Facebook for free updates and tips on how to create, shape and grow a small business website.

Today at work I was creating a form. I’m not a big JavaScript buff, but one of my tasks was to use a checkbox to toggle a form field between “enabled” and “disabled”. So, after browsing the web for a solution, I decided it would be simpler to roll up my sleeves and get dirty writing my own function.

Here is what I came up with (view the demo):

JavaScript

function toggle(checkboxID, toggleID) {
  var checkbox = document.getElementById(checkboxID);
  var toggle = document.getElementById(toggleID);
  updateToggle = checkbox.checked ? toggle.disabled=true : toggle.disabled=false;
}

HTML

<input
    id="example"
    name="example"
    onClick="toggle('example', 'disableMe')"
    type="checkbox" value="1" /> When this is checked, something is disabled <br />

<input
    id="disableMe"
    name="disableMe"
    type="text"
    value="This input box will get disabled" />

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:

function toggle(checkboxID, toggleID) {
  var checkbox = document.getElementById(checkboxID);
  var toggle = document.getElementById(toggleID);
  updateToggle = checkbox.checked ? toggle.disabled=false : toggle.disabled=true;
}

I haven’t done extensive testing as to whether this works across all browsers, but it seems to be working just fine in Firefox.

Demo