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.
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();
}
}<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>onchange. JS should be in one place only and that's the respective tag or file. Query your selector and use .addEventListener() instead.data-toggle-cols="2,3" on your select elements, where the value "2,3" indicates the nth columns to target in the table. Having those numbers you can easily construct a selector like td:nth-child(2) input[type="text"], td:nth-child(3) input[type="text"] to get all the needed inputs.querySelectorAll() and then .forEach() that NodeList and set the disabled Element property as desired.Example:
// DOM utils
const el = (sel, par = document) => par.querySelector(sel);
const els = (sel, par = document) => par.querySelectorAll(sel);
// Task
const toggleColumnsTextBox = (elSelect) => {
let nth = elSelect.dataset.toggleCols; // get cols indexes string "2,3"
nth = nth.replace(/ /g, "").split(","); // convert to array i.e: [2, 3]
const selector = nth.map(n => `td:nth-child(${n}) input[type="text"]`).join(", "); // construct selector
console.log(selector)
const noValue = elSelect.value.trim() === ""; // Boolean (true if value is "" empty string)
const elTable = elSelect.closest("table"); // Get the parent table
const elsInputs = els(selector, elTable); // Get all input[type=text] of `nth` columns
elsInputs.forEach((elInput) => {
elInput.disabled = noValue;
});
};
els("[data-toggle-cols]").forEach((elSelect) => {
elSelect.addEventListener("input", () => {
toggleColumnsTextBox(elSelect);
});
});<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 data-toggle-cols="2,3" id="ALE1" name="ALE1" class="form-control" required="True">
<option value="">----</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</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 data-toggle-cols="4,5" id="ALE3" name="ALE3" class="form-control" required="True">
<option value="">----</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</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>