JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<form id="searchbar-form" class="form-inline">
  <select class="form-control custom-select" multiple="multiple" name="slug" id="slug-input">
    <optgroup label="Engelska gratis">
      <option value="svensk-engelsk" data-product="en" data-dict-lang="en" data-dict-name="en" data-dict-variant="" data-src="sv" data-dst="en" data-active="true" data-swappable="true" data-rtl="false" data-osk="false">Svenska - Engelska</option>
      <option value="engelsk-svensk" data-product="en" data-dict-lang="en" data-dict-name="en" data-dict-variant="" data-src="en" data-dst="sv" data-active="true" data-swappable="true" data-rtl="false" data-osk="false">Engelska - Svenska</option>
    </optgroup>
    <optgroup label="Svenska">
      <option value="svensk-ordbok" data-product="sv-sv-ord" data-dict-lang="sv" data-dict-name="sv" data-dict-variant="ord" data-src="sv" data-dst="sv" data-active="false" data-swappable="false" data-rtl="false" data-osk="false">Svenska</option>
    </optgroup>
    <optgroup label="Svenska synonymer">
      <option value="svenska-synonymer" data-product="sv-sv-syn" data-dict-lang="sv" data-dict-name="sv" data-dict-variant="syn" data-src="sv" data-dst="sv" data-active="false" data-swappable="false" data-rtl="false" data-osk="false">Svenska</option>
    </optgroup>
    <optgroup label="Engelska pro">
      <option value="svensk-engelsk-pro" data-product="en-en-pro" data-dict-lang="en" data-dict-name="en" data-dict-variant="pro" data-src="sv" data-dst="en" data-active="false" data-swappable="true" data-rtl="false" data-osk="false">Svenska - Engelska</option>
      <option value="engelsk-svensk-pro" data-product="en-en-pro" data-dict-lang="en" data-dict-name="en" data-dict-variant="pro" data-src="en" data-dst="sv" data-active="false" data-swappable="true" data-rtl="false" data-osk="false">Engelska - Svenska</option>
    </optgroup>
    <optgroup label="Engströms tekniska">
      <option value="svensk-engelsk-teknisk" data-product="en-eng-tek"...

SCSS

.custom-select {
    display: none;
}

.dictionary-selector {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 0.25rem;
    box-shadow: 1px 1px 2px rgba(0,0,0,.2);
    display: flex;
    flex-wrap: wrap;
    font-family: 'PT Sans', sans-serif;
    justify-content: flex-start;
    max-width: 100%;
    padding: 20px 0;

    .dictionary-selector-item {
        border: 0;
        border-right: 1px solid #eee;
        box-sizing: border-box;
        margin: 0;
        padding: 0 0 20px 20px;
        user-select: none;
        width: 25%;

        &:nth-child(12),
        &:nth-child(16),
        &:nth-child(20),
        &:nth-child(24),
        &:nth-child(4),
        &:nth-child(8) {
            border-right: 0;
        }

        label {
            display: block;
            font-family: 'PT Sans Narrow', sans-serif;
            font-weight: 700;
            letter-spacing: .03rem;
            margin-bottom: 5px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .dictionary-selector-item-name {
            cursor: pointer;
            display: block;
            white-space: nowrap;
            
            &.disabled {
                opacity: .4;
            }
            
            &::before {
                content: "\f0c8";
                color: #f2f2f2;
                display: inline-block;
                font: normal normal normal 14px/1 FontAwesome;
                font-size: inherit;
                padding-right: 5px;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            &.checked::before {
                color: #46bf87;
                content: "\f00c";
                margin: 0;
                padding-right: 3px;
            }

            input {
                display: none;
            }
        }
    }
}

JavaScript

$(function() {
	var svCheckbox = $('.dictionary-selector-item input[data-src="sv"]');
  var otherCheckbox = $('.dictionary-selector-item input:not([data-src="sv"])');
	svCheckbox.parent().click(function() {
  	$(this).children('input').click();
    if ($(this).children('input').is(':checked')) {
      $(this).addClass('checked');
      svCheckbox.each(function() {
      	$(this).parent().siblings().removeClass('disabled');
        $(this).parent().removeClass('disabled');
      	$(this).prop('disabled', false);
      });
      otherCheckbox.each(function() {
      	$(this).parent().removeClass('checked');
        $(this).prop('disabled', true);
        $(this).parent().addClass('disabled');
      });
      $(this).siblings().children('input').prop('checked', false);
      $(this).siblings().children('input').prop('disabled', false);
      $(this).siblings().removeClass('disabled');
      $(this).siblings().removeClass('checked');
    } else {
      $(this).removeClass('checked');
      $(this).removeClass('disabled');
      otherCheckbox.each(function() {
      	$(this).prop('disabled', false);
        $(this).parent().removeClass('disabled');
      });
    }
  });

  otherCheckbox.parent().click(function() {
  	$(this).children('input').click();
    if ($(this).children('input').is(':checked')) {
      $(this).addClass('checked');
      otherCheckbox.each(function() {
      	$(this).parent().siblings().removeClass('disabled');
        $(this).parent().removeClass('disabled');
      	$(this).prop('disabled', false);
      });
      svCheckbox.each(function() {
      	$(this).parent().removeClass('checked');
        $(this).prop('disabled', true);
        $(this).parent().addClass('disabled');
      });
      $(this).siblings().children('input').prop('checked', false);
      $(this).siblings().children('input').prop('disabled', false);
      $(this).siblings().removeClass('disabled');
      $(this).siblings().removeClass('checked');
    } else {
     ...