Dynamically enable/disable checkboxes in a form.

For a project I’m working on I need a way to disable/enable checkboxes in a form based on which option the user selects from a dropdown list. The easy way would have been to split it up in two forms, the user selects the option from the dropdown list, submits the form and the page reloads and shows the appropriate checkboxes but that’s not what I wanted, it should be dynamic. I knew I had to look at javascript to get this done.

For this example I’ll do everything inline and not use separate files.

Here’s the form



Title

The first option from the dropdownlist, QA, should allow you to select any of the checkboxes.
Option QB should not allow you to select the options Spell and Wand, while option QC should not allow the option Wand.

You can trigger a javascript when the user selects a different option by adding the onchange=”script”
in the select tag but a better way is to be unobtrusive. You can accomplish this by adding a piece of javascript and the best place to add javascript in a HTML page is at the end, just before the tag </body>

This will find the form by id gratis and change the onchange element of the element sel, which is the name of the select tag. When the onchange is activated it will start the script called modify

function inArray(array, value) {
    for (var i = 0; i < array.length; i += 1) {
        if (value === array[i]) {
            return true;
        }
    }
}

function modify(){

    var Form = this.form,
        Selected = Form.elements.sel.value,
        Disabled = {
            'QA': ['-'],
            'QB': ['spell' , 'wand'],
            'QC': ['spell']
        },
        Element;

    for (i = 0; i < Form.elements.length; i++) {
        Element = Form.elements[i];
            if (Element.type == 'checkbox') {
                if (inArray(Disabled[Selected], Element.value)) {
                    Element.disabled = true;
                    Element.checked = false;
                    Element.parentNode.className = 'disabled';
                } else {
                    Element.disabled = false;
                    Element.parentNode.className = '';
                }
            }
        }
    }
}

Let me explain this piece of code:

The variable Disabled is a multidimensional array which defines the checkboxes that should be disabled for each option, if no checkboxes should be disabled we add the value ‘-‘ to array.
Loop through all the elements of the form (line 20) and if the element is a checkbox (line 22) we need to some more checking. If the value of the checkbox is in the array of the selected option (line 23) we need to disable it, uncheck it and let’s change the way the text is displayed as well by adding a class to the tag label. That way it’s more obvious the checkbox is not available otherwise we enable the checkbox and remove the class from the tag label.

Here’s the entire HTML page.



Title



    

Demo



Title



	

This article is filed under the categories Software » Web and has the following tags associated with it: , , , , , , , , , , .
download