Does anyone know a way to enable all the times in this selection box without having to go through them with "document.getElementById". There are about 30 of these, for all the times.
In the live code, the option values (times) can be disabled depending on a date selection, so at the start of the function (onchange event) it enables them all for use again (and disables per date selected).
<select name="time" id="time">
<option value="N/A">Select</option>
<option value="12:00pm" id="12:00pm">12:00pm</option>
<option value="12:15pm" id="12:15pm">12:15pm</option>
<option value="12:30pm" id="12:30pm">12:30pm</option>
<option value="12:45pm" id="12:45pm">12:45pm</option>
<option value="13:00pm" id="13:00pm">13:00pm</option>
<option value="13:15pm" id="13:15pm">13:15pm</option>
<option value="13:30pm" id="13:30pm">13:30pm</option>
<option value="13:45pm" id="13:45pm">13:45pm</option>
<option value="14:00pm" id="14:00pm">14:00pm</option>
</select>
<script>
var select = document.getElementById('date');
select.onchange = SetClosed;
window.onload = SetClosed;
function SetClosed(){
document.getElementById("12:00pm").disabled = false;
document.getElementById("12:15pm").disabled = false;
document.getElementById("12:30pm").disabled = false;
document.getElementById("12:45pm").disabled = false;
document.getElementById("13:00pm").disabled = false;
document.getElementById("13:15pm").disabled = false;
document.getElementById("13:30pm").disabled = false;
document.getElementById("13:45pm").disabled = false;
document.getElementById("14:00pm").disabled = false;
}
</script>
i have tried this to replace the large amounts of "getElementById", but no joy:
document.querySelectorAll('input[name="time"]').forEach(element => {element.removeAttribute("disabled");});
The code works using ID's of course, but was hoping there could be a way to reduce the code down a bit.
CodePudding user response：
You can use parent child selectors in querySelectorAll:
document.querySelectorAll('select#time option').forEach(element => {element.removeAttribute("disabled");});
CodePudding user response：
You are tryng to achieve somthing like this?
function reenable(){
document.querySelectorAll('select[name=time] option').forEach(ele => {
ele.disabled=false;
});
}<select name="time">
<option value="N/A">Select</option>
<option value="12:00pm">12:00pm</option>
<option value="12:15pm" disabled>12:15pm</option>
<option value="12:30pm">12:30pm</option>
<option value="12:45pm">12:45pm</option>
<option value="13:00pm" disabled>13:00pm</option>
<option value="13:15pm" disabled>13:15pm</option>
<option value="13:30pm">13:30pm</option>
<option value="13:45pm">13:45pm</option>
<option value="14:00pm" disabled>14:00pm</option>
</select>
<select name="time">
<option value="N/A">Select</option>
<option value="12:00pm">12:00pm</option>
<option value="12:15pm" disabled>12:15pm</option>
<option value="12:30pm">12:30pm</option>
<option value="12:45pm">12:45pm</option>
<option value="13:00pm" disabled>13:00pm</option>
<option value="13:15pm" disabled>13:15pm</option>
<option value="13:30pm">13:30pm</option>
<option value="13:45pm">13:45pm</option>
<option value="14:00pm" disabled>14:00pm</option>
</select>
<select name="time">
<option value="N/A">Select</option>
<option value="12:00pm">12:00pm</option>
<option value="12:15pm" disabled>12:15pm</option>
<option value="12:30pm">12:30pm</option>
<option value="12:45pm">12:45pm</option>
<option value="13:00pm" disabled>13:00pm</option>
<option value="13:15pm" disabled>13:15pm</option>
<option value="13:30pm">13:30pm</option>
<option value="13:45pm">13:45pm</option>
<option value="14:00pm" disabled>14:00pm</option>
</select>
<select name="time">
<option value="N/A">Select</option>
<option value="12:00pm">12:00pm</option>
<option value="12:15pm" disabled>12:15pm</option>
<option value="12:30pm">12:30pm</option>
<option value="12:45pm">12:45pm</option>
<option value="13:00pm" disabled>13:00pm</option>
<option value="13:15pm" disabled>13:15pm</option>
<option value="13:30pm">13:30pm</option>
<option value="13:45pm">13:45pm</option>
<option value="14:00pm" disabled>14:00pm</option>
</select>
<select name="time">
<option value="N/A">Select</option>
<option value="12:00pm">12:00pm</option>
<option value="12:15pm" disabled>12:15pm</option>
<option value="12:30pm">12:30pm</option>
<option value="12:45pm">12:45pm</option>
<option value="13:00pm" disabled>13:00pm</option>
<option value="13:15pm" disabled>13:15pm</option>
<option value="13:30pm">13:30pm</option>
<option value="13:45pm">13:45pm</option>
<option value="14:00pm" disabled>14:00pm</option>
</select>
<select name="time">
<option value="N/A">Select</option>
<option value="12:00pm">12:00pm</option>
<option value="12:15pm" disabled>12:15pm</option>
<option value="12:30pm">12:30pm</option>
<option value="12:45pm">12:45pm</option>
<option value="13:00pm" disabled>13:00pm</option>
<option value="13:15pm" disabled>13:15pm</option>
<option value="13:30pm">13:30pm</option>
<option value="13:45pm">13:45pm</option>
<option value="14:00pm" disabled>14:00pm</option>
</select>
<select name="time">
<option value="N/A">Select</option>
<option value="12:00pm">12:00pm</option>
<option value="12:15pm" disabled>12:15pm</option>
<option value="12:30pm">12:30pm</option>
<option value="12:45pm">12:45pm</option>
<option value="13:00pm" disabled>13:00pm</option>
<option value="13:15pm" disabled>13:15pm</option>
<option value="13:30pm">13:30pm</option>
<option value="13:45pm">13:45pm</option>
<option value="14:00pm" disabled>14:00pm</option>
</select>
<select name="time">
<option value="N/A">Select</option>
<option value="12:00pm">12:00pm</option>
<option value="12:15pm" disabled>12:15pm</option>
<option value="12:30pm">12:30pm</option>
<option value="12:45pm">12:45pm</option>
<option value="13:00pm" disabled>13:00pm</option>
<option value="13:15pm" disabled>13:15pm</option>
<option value="13:30pm">13:30pm</option>
<option value="13:45pm">13:45pm</option>
<option value="14:00pm" disabled>14:00pm</option>
</select>
<br><br>
<button onclick='reenable()'>Enable All</button>