Trying to control multiple form elements on an HTML page with JavaScript has presented a challenge for me. In my form, each row contains a checkbox that should enable/disable the elements on that row.
The issue I'm facing is that only the first two form elements are being disabled, regardless of their order. Once those initial two elements are disabled, the remaining JavaScript code in the function stops executing altogether.
Below is the snippet within the function (which is called by the onChange attribute of every checkbox):
document.getElementsByName(prefix + "fase" + phaseNumber + "_" + objectNumber + "_quantity")[0].disabled = !theBox.checked;
document.getElementsByName(prefix + "fase" + phaseNumber + "_" + objectNumber + "_description")[0].disabled = !theBox.checked;
document.getElementsByName(prefix + "fase" + phaseNumber + "_" + objectNumber + "_price")[0].disabled = !theBox.checked;
document.getElementsByName(prefix + "fase" + phaseNumber + "_" + objectNumber + "_language")[0].disabled = !theBox.checked;
Although each form element has a unique name and the individual lines of code work independently, they fail when grouped together. For instance, in the provided code, the fields for "quantity" and "description" will be affected, but not those for "price" and "language."
Even if I change the order of the lines, the first two always execute, while the subsequent lines do not. All lines of code seem to be ignored collectively; it's as if they've been commented out. I attempted debugging by adding some alerts after the above code, but they never appear. The names of the elements are correct.
While I am certain there's an error somewhere, I can't pinpoint it since the individual lines work fine. This situation is incredibly frustrating! Any assistance would be greatly appreciated.