I'm working on a form and I'm wondering if its possible to have multiple enable / disable functions?

I'm looking to have a drop down menu, file upload box (with button), and 2 buttons by themselves disabled when the page loads..

I then want a check box to be clicked to enable those boxes and then I want 2 separate text boxes to become disabled..

It would be nice to add in so that when you click the checkbox again it disables the first section and disables the second half when unchecked..

I have no idea how to code something like this with JavaScript so I would love to have some help with it.

Thank you very much in advance! :)

just so you can have a visual its something like this..

<input type="checkbox"/>

this part is disabled:

<select>
<option>Month</option>
</select>
<select>
<option>Day</option>
</select>
<select>
<option>Year</option>
</select>

Picture: <input type="file"/>

<input type="button" value="add"/>
<input type="button" value="delete"/>

when you click the checkbox

the above becomes disabled and then these become disabled:

and these become enabled

<select>
<option>Choose country</option>
</select>

<input type="text>

edit: I know theres nothing in the drop down lists but thats because I didn't bother adding it in there in this example.

Member Avatar for stbuchok

to enable an element you can do document.getElementById('elementID').disable = false;
or
to disable an element you can do document.getElementById('elementID').disable = true;

Combine this with events like onclick or onchange and you should be able to do everything you want.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.