JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<select name="facility" multiple="" size="6"><option value="1000105">Facility Name #1</option><option value="1000106">Facility Name #2</option><option value="1000008">Houston TX</option><option value="3">Mattoon</option><option value="1000004">My Facility</option><option value="1000003">North Plant</option></select>

<br />
<br />

<div class="checkbox-archived"><span></span>Show Archived Courses</div>
<div class="checkbox-notify"><span></span>Notify User with a Welcome Email</div>

CSS

/* checkbox styling */
.checkbox-archived {
  cursor: pointer;
  font-family: helvetica, serif;
  font-size: 12px;
}
.checkbox-notify {
  cursor: pointer;
  font-family: helvetica, serif;
  font-size: 12px;
}
.checkbox-archived span {
    width: 18px;
    height: 18px;
    background-size: cover;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    background-image:...

JavaScript

// converts a multiple select tag to click only behaviour
// takes a jQuery element as parameter

function customizeMultipleSelect(element){

	element.find('option').mousedown(function(e) {

    e.preventDefault();

    var scroll = element.scrollTop();

    $(this).prop('selected', !$(this).prop('selected'));

    setTimeout(function(){

      element.scrollTop(scroll);

    },0);

    element.change();

    return false;

  });

}

customizeMultipleSelect($('select[name="facility"]'));

// toggle class on checkbox

$('.checkbox-archived').click(function(){

	$(this).toggleClass('checked');

});

$('.checkbox-notify').click(function(){

	$(this).toggleClass('checked');

});