Toggle (enable and disable) a form field with a checkbox: JavaScript 101

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

8 Responses to “Toggle (enable and disable) a form field with a checkbox: JavaScript 101”

  1. JanDhondt

    and what about toggling more than one field by selecting only one checkbox?

  2. JanDhondt

    I find the solution, separating by ,
    But what with radio buttons, they do not reset when leaving (becose no click!)

  3. Sorry, it must be that I am applying this to a div tag I did this to disable multiple input tags. Can I apply it to multiple areas of the form in the one action?

  4. Peter J. Hart

    A more elegant way to do the last line of toggle() would be instead of:
    updateToggle = checkbox.checked ? toggle.disabled=false : toggle.disabled=true;
    write:
    toggle.disabled= checkbox.checked;

    Then you could get rid of all the variables in the function:
    function toggle(checkboxId, toggleId) {
    document.getElementById(toggleId).disabled= document.getElementById(checkboxId).checked;
    }

    Or, you can get rid of the method altogether:

  5. Peter J. Hart

    Or, you can get rid of the method altogether:

    <input type=”checkbox” onclick=”this.form.disableMe.disabled=this.checked”/>

    <input type=”text” name=”disableMe”/>

  6. Marc Urselli (@MarcUrselli)

    That was a really cool suggestion because it’s short, elegant and doesn’t require javascript code in the head, however it didn’t work for me…
    This did work for me:

    unfortunately it doesn’t toggle but at least it enables when the field is initially disabled (which is what I needed to do in my case)

    toggling would be nice though…

Leave a Reply