I am trying to enable or disable multiple text boxes on selection box change. Meaning when I select any option in a selection box, all fields should be enabled.
Tried the JavaScript and Html below but It only works with the option value of 8 when selected in the dropdown list. However I would like it to work with any option selected. It should enable the first 14 textbox fields with any option selected in the dropdown list and the second dropdown list should enable / disable the last 14 texboxes.
<script type="text/javascript">
function EnableDisableTextBox(ALE2) {
var selectedValue = ALE1.options[ALE1.selectedIndex].value;
var ALE2 = document.getElementById("ALE2");
ALE2.disabled = selectedValue == 8 ? false : true;
if (!ALE2.disabled) {
ALE2.focus();
}
}
</script>
<table class="table table-bordered no-margin">
<tbody>
<tr>
<td>
<b>
S
</b>
</td>
<td>
<div class="col-md-10 col-sm-4 col-xs-4">
<select id="ALE1" name="ALE1" class="form-control" onchange="EnableDisableTextBox(this)"
required="True">
<option value="">
----
</option>
<cfloop query="qryGetALESelect">
<option value="#ale1#">
#ALE1#
</option>
</cfloop>
</select>
</div>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE2" name="ALE2"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
<div class="col-md-10 col-sm-4 col-xs-4">
<select id="ALE3" name="ALE3" class="form-control" required="True">
<option value="">
----
</option>
<cfloop query="qryGetALESelect">
<option value="ALE1">
#ALE1#
</option>
</cfloop>
</select>
</div>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE4" name="ALE4"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
</tr>
<tr>
<td>
<b>
T
</b>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE5" name="ALE5"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE6" name="ALE6"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<b>
A
</b>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE8" name="ALE8"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE9" name="ALE9"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
<div class="col-sm-8">
<input
type="text" class="form-control" id="ALE10" name="ALE10" value="" pattern="^[
A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder="" data-error="" disabled="disabled"
</div>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE11" name="ALE11"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
</tr>
<tr>
<td>
<b>
R
</b>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE12" name="ALE12"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE13" name="ALE13"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<b>
B
</b>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE14" name="ALE14"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE15" name="ALE15"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE16" name="ALE16"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE17" name="ALE17"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
</tr>
<tr>
<td>
<b>
O
</b>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE18" name="ALE18"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE19" name="ALE19"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<b>
A
</b>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE20" name="ALE20"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE21" name="ALE21"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE22" name="ALE22"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE23" name="ALE23"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
</tr>
<tr>
<td>
<b>
R
</b>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE24" name="ALE24"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE25" name="ALE25"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
</td>
</tr>
<tr>
<td>
<b>
D
</b>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE26" name="ALE26"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE27" name="ALE27"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE28" name="ALE28"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE29" name="ALE29"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE30" name="ALE30"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
</td>
<td>
<div class="col-sm-8">
<input type="text" class="form-control" id="ALE31" name="ALE31"
value="" pattern="^[ A-Za-z0-9[]()*-+/%]*$" maxlength="2" placeholder=""
data-error="" disabled="disabled">
</div>
</td>
<td>
</td>
</tr>
</tbody>
</table>