如何在 html 选择下拉框中启用大量选项值？答案

【问题标题】：How to enable bulk amount of option values in html selection drop down box?如何在 html 选择下拉框中启用大量选项值？
【发布时间】：2021-12-06 15:57:19
【问题描述】：

有没有人知道一种方法可以在此选择框中始终启用，而无需使用“document.getElementById”进行检查。一直都有大约 30 个。

在实时代码中，可以根据日期选择禁用选项值（时间），因此在函数（onchange 事件）开始时，它会启用它们以再次使用（并禁用每个选定的日期）。

<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>

我已经尝试用这个来替换大量的“getElementById”，但没有任何乐趣：

document.querySelectorAll('input[name="time"]').forEach(element => {element.removeAttribute("disabled");});

代码当然可以使用 ID，但希望有办法将代码减少一点。

【问题讨论】：

给每个元素一个相同的类，然后删除禁用的属性？我不确定它..

标签： javascript html

【解决方案1】：

您可以在querySelectorAll 中使用父子选择器：

document.querySelectorAll('select#time option').forEach(element => {element.removeAttribute("disabled");});

【讨论】：

干杯梅尔文，这很有魅力！虽然这个解决方案在 IE11 中不起作用，所以我想直到明年（2022 年 6 月 15 日，IE11 从 Windows 中删除）我暂时只需要保留庞大的 ID 代码。

【解决方案2】：

您正在努力实现这样的目标？

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>

【讨论】：