无需 Ctrl 单击要求的 HTML 多选框

Question

（在将其写为此类性质的各种其他问题的副本之前，或者之前已经回答过，请仔细阅读。）

我想让我的 HTML5 多选选项，所以他们永远不需要按住 Ctrl 来选择/取消选择它们而不影响其他选项。 （这是针对我多年来一直在研究的 Perl Web 应用程序，最近我被要求使多个选择框不易发生意外，即用户（其中​​一些人已经很老）丢失所有其他选定的选项当他们点击一个时，可能没有注意到。）

在花了几个小时测试了我在网上找到的各种解决方案之后，我还没有找到任何可以做我想做的事情，即：

1. 我不想使用 jQuery，因为我在这个应用程序中还不需要它，我想保持尽可能精简（W3Schools 说“在 JavaScript 版本 5（2009）之后，大多数 jQuery 实用程序都可以用几行标准的 JavaScript 就可以解决”）。
2. 使用简单的 HTML 多选控件，无需（或最少）更改 HTML 标记。
3. 任何禁用的<option> s（可能在页面加载时预先选择）不应通过单击它们（或通过单击任何其他选项）来选择/不可选择。
4. 单击选项不应导致选项列表自动滚动，某些解决方案会发生这种情况。
5. 所选选项至少应在 Chrome 中以传统的蓝色（或类似的 - 不是灰色）显示。
6. 至少在 Chrome 中，即使在单击选择框之前，所选项目也应该（最好）是蓝色的。 （默认情况下，Firefox 中的传统多选​​选项会发生这种情况，但 Chrome 不会。）

我一直在寻找的解决方案之一是如何避免使用 Javascript 在多选框中按 ctrl-click 的需要？ （以及该页面上的其他人），它是 Fiddle（ http://jsfiddle.net/xQqbR/1022 ）。 这是一个好的开始，但不能满足我的要求 1、3 和 6。我看到各种评论者都指出（以及如何）不应该需要 jQuery，但是在尝试了他们的建议之后我不能让它工作，我几乎不知道任何 JavaScript 来解决这个问题。

这是我正在处理的标记类型：

<select multiple size=3>
  <option>Option 1</option>
  <option>Option 2</option>
  <option disabled>Option 3 (disabled)</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
  <option selected>Option 7 (selected)</option>
  <option disabled selected>Option 8 (disabled+selected)</option>
</select>

提前感谢您的时间和专业知识。

Answer 1

 var expanded = false; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } }

 #select22 { border-radius: 4px; width: 100%; height: 30px; color: white; padding-bottom: 2px; background-color: #00ced1; border: 1px solid #00ced1; border-bottom: 0.5px solid white; /* Here's the code we need */ -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .select-wrapper22:after { font-family: FontAwesome; content: '\\f107'; font-size: 20px; position: absolute; top: 6px; right: 4px; color: white; pointer-events: none; } .select-wrapper22:after:hover{ font-family: FontAwesome; content: '\\f107'; font-size: 20px; position: absolute; top: 6px; right: 4px; color: #00ced1; pointer-events: none; } .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #checkboxes { display: none; border: 1px #7e7e7e solid; background-color: white; padding-top: 10px; } #checkboxes label::before { display: block; font-family: Aller Light; background-color: white; color: #7e7e7e; } #checkboxes label::after { display: block; font-family: Aller Light; background-color: white; color: aqua; } #checkboxes label:hover { color: #00ced1; } #checkboxes label::after { color: #00ced1; } .cotner { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .cotner input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .chmk { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: white; } .chmk:after { content: ""; position: absolute; display: none; } .cotner input:checked ~ .chmk:after { display: block; color: aqua; } .cotner .chmk:after { left: 9px; top: 2px; width: 5px; height: 10px; border: solid #00ced1; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } input[type=checkbox]:checked + label { color: red }

 <div> <p class="sideheadingdrop">Hard Skills<i style="" class="fa fa-exclamation-circle"></i></p> <div class="select-wrapper22" onclick="showCheckboxes()"> <select id="select22" > <option value="" disabled selected hidden></option> </select> <div class="overSelect"></div> </div> <div id="checkboxes"> <label for="one" class="cotner"> <input type="checkbox" id="one" /> <span class="chmk"></span>First checkbox</label> <label for="two" class="cotner"> <input type="checkbox" id="two" /> <span class="chmk"></span>Second checkbox</label> <label for="three" class="cotner"> <input type="checkbox" id="three" /> <span class="chmk"></span>Third checkbox</label> </div> </div>

我在不使用 ctrl 的情况下创建了多个复选框。