Dynamically Enable and Disable Div using Mootools
Here is my HTML
<div class="form-wrapper" id="1_1_18-wrapper">
<input type="checkbox" class="field_container field_18 option_1 parent_1" style="" show="1" alias="confirm_student" value="1" id="1_1_18" name="1_1_18">
<label class="optional" for="1_1_18">Are You a student</label>
</div>
<div class="form-wrapper" id="1_1_16-wrapper">
<div class="form-label" id="1_1_16-label">
<label class="optional" for="1_1_16">School Type</label>
</div>
<div class="form-element" id="1_1_16-element">
<select onchange="changeFields(this)" class="field_container field_16 option_1 parent_1" style="" show="1" alias="" id="1_1_16" name="1_1_16">
<option label="" value=""></option>
</select>
</div>
</div>
<div class="form-wrapper" id="1_1_17-wrapper">
<div class="form-label" id="1_1_17-label">
<label class="optional" for="1_1_17">School Name</label>
</div>
<div class="form-element" id="1_1_17-element">
<input type="text" class="field_container field_17 option_1 parent_1" style="" show="1" alias="" value="" id="1_1_17" name="1_开发者_Python百科1_17">
</div>
</div>
<div class="form-wrapper" id="1_1_8-wrapper">
<div class="form-label" id="1_1_8-label">
<label class="optional" for="1_1_8">Website</label>
</div>
<div class="form-element" id="1_1_8-element">
<input type="text" class="field_container field_8 option_1 parent_1" show="1" alias="" value="" id="1_1_8" name="1_1_8">
</div>
</div>
How to enable next two div when checking the first check box (ie, Are You a student) and disable when uncheck the checkbox. All the id of every elements are getting from auto icremented mysql table fields. Only the check box alias
attributes is user defined. Any idea will be appreciable
Thanks
IF you want the DIVs to stop working once someone has clicked on them, I would recommend something like this:
The user clicks on the div (using an onclick event), and when the user has filled out the desired info, fire another event to validate the information. If the information checks out, then create a custom event for the div (while destroying the other events) that just stops the event. (addEvent('click), function (x) {x.stop()});) And to enable the other divs, you just set a variable to true.
Also, could you just add disabled="disabled" to the forms when the user clicks on it?
精彩评论