無需 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 的情況下創建了多個復選框。