My form currently has 2 radio buttons, with one already checked by default. I've disabled some fields and want to enable them when the second radio button is checked, and disable them (as well as restore CSS properties) when the first radio button is checked.
Currently, I am only able to do this for input fields without using any scripts.
Any assistance on this matter would be greatly appreciated.
input[disabled='disabled'], textarea[disabled='disabled'], select[disabled='disabled'] {
background: #ddddbb;
color: black;
cursor: default;
}
input[type="text"]:disabled, input[type="select"]:disabled {
background: #ddddbb;
}<html>
<title>Form</title>
<body bgcolor="#FFFFFF" topmargin="20" leftmargin="50">
<input type="radio"
name="radSize"
id="generic_test"
value="false" checked="checked" onclick="document.getElementById('project_id').disabled=true;" />
<label for="generic_test">Generic Test</label>
<input type="radio"
name="radSize"
id="project_test"
value="true" onclick="document.getElementById('project_id').disabled=false;" /><label for="project_test">Project Test</label>
<table align="left">
<tr>
<tr>
<td width="126" height="24" align="left"
valign="middle">
<span class="f1">Project ID <span class="star">*</span></span>
</td>
<td width="126" height="24" align="left"
valign="middle">
<input type="text"
name="project_id" id="project_id" size="19"
value="" disabled="disabled">
</td>
</tr>
<tr>
<td height="24" width="50" align="left"
valign="middle">
<span class="f1"> Multiphase <span class="star">*</span></span>
</td>
<td align="left" valign="middle" nowrap="nowrap">
<select name="multiphase"
id="multiphase"
onchange="onChangeFunction();" disabled="disabled">
<option value='' selected></option>
<option value='Yes'>Yes</option>
<option value='No'>No</option>
</select>
</td>
</tr>
<div>
<tr>
<td class="f1">Text Area<br><span class="star">*</span> </td>
<td>
<textarea id="textInputField3"
name="textInputField3"
style="resize:vertical; text-align:top; "
rows="5"
cols="52"
disabled="disabled"></textarea>
</td>
</tr>
</div>
</tr>
</table>