javascript - 没有 Ctrl-click 要求的 HTML 多选框

Question

(在将此作为其他各种此类问题的副本或之前已回答之前，请仔细阅读。)

我想让我的 HTML5 多选选项，这样它们就不需要按住 Ctrl 键来选择/取消选择它们，而不会影响其他选项。 (这是我多年来一直致力于开发的 Perl Web 应用程序，最近我被要求减少多选框的意外发生，即用户(其中​​一些人年纪很大)丢失所有其他选择的选项当他们点击一个时，可能没有注意到。)

在花了几个小时测试我在网上找到的各种解决方案之后，我还没有找到任何我想要的解决方案，即:

1. 我不想使用 jQuery，因为我在这个应用程序中还不需要它，我希望它尽可能保持精简(W3Schools 说“after JavaScript Version 5 (2009), most of the jQuery utilities can be solved with a few lines of standard JavaScript”)。
2. 使用简单的 HTML 多选控件，无需(或极少)更改 HTML 标记。
3. 任何残疾人 <option> s(可能在页面加载时预先选择)不应通过单击它们(或通过单击任何其他选项)来选择/取消选择。
4. 点击一个选项不应导致选项列表自动滚动，这在某些解决方案中会发生。
5. 所选选项至少应在 Chrome 中以传统的蓝色(或类似的 - 而不是灰色)显示。
6. 至少在 Chrome 中，即使在点击选择框之前，所选元素也应该(最好)是蓝色的。 (默认情况下，Firefox 中的传统多选​​选项会发生这种情况，Chrome 不会。)

我一直在寻找的解决方案之一是 How to avoid the need for ctrl-click in a multi-select box using Javascript? (在该页面上的其他人中)它是 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 的情况下创建了多个复选框。