0xD34F

Очевидно же - добавлять disabled. Для выбранного чекбокса - когда количество выбранных чекбоксов меньше или равно минимально допустимому. Для не выбранного - когда количество выбранных чекбоксов больше или равно максимально допустимому.

https://jsfiddle.net/x6uzv5hw/

Чекбоксы кастомные и при втором клике на один из них - они полностью игнорируют свойства checked и disabled

Ну значит криво вы их реализовали, только и всего. Погуглите, как сделать правильно.

minimap

const idsA = new Set(ListA.map(n => n.id));
const objB = Object.fromEntries(ListB.map(({ uid, ...n }) => [ uid, (n.id = uid, n) ]));
const ListAB = ListA.map(n => ({ ...n, ...objB[n.id] }));
ListB.forEach(({ uid }) => idsA.has(uid) || ListAB.push(objB[uid]));

Останавливайте всплытие при клике на инпут:

$list.find('input').click(e => e.stopPropagation());

Или проверяйте целевой элемент (это в обработчике клика по $listItems):

if (!$(e.target).is('input')) {
  $list.hide();
}

Вынесите её в thead.


UPD. Как это может выглядеть: thead, и дурацкий вариант.

str.match(/rgb\(.*\)/).pop().match(/\d+/g)

или

str.match(/rgb\((.*)\)/).pop().split(', ')

Замените

projectTechnologies.innerHTML = technologyHandler(dataTechnologies).map((el) => el);

на

projectTechnologies.innerHTML = technologyHandler(dataTechnologies).map(n => n.outerHTML).join('');

// или

technologyHandler(dataTechnologies).forEach(n => projectTechnologies.appendChild(n));

// или

for (const n of technologyHandler(dataTechnologies)) {
  projectTechnologies.insertAdjacentElement('beforeend', n);
}

// или

projectTechnologies.append(...technologyHandler(dataTechnologies));

ИЛИ

Перепишите technologyHandler следующим образом:

const technologyHandler = str => str
  .split(' ')
  .map(n => `<p class="project_technologies-item">${n}</p>`)
  .join('');

// или

const technologyHandler = str =>
  str.replace(/ ?(\S+)/g, '<p class="project_technologies-item">$1</p>');

И уберите map после её вызова:

projectTechnologies.innerHTML = technologyHandler(dataTechnologies);

Во-первых - погуглите, что такое всплытие событий.

Во-вторых - про модификаторы событий слышали? Надо бы self прикрутить - это если на "тень". Или stop - на окно.

:href="`https://oauth.vk.com/authorize?client_id=${client_id}`"

или

computed: {
  href() {
    return `https://oauth.vk.com/authorize?client_id=${this.client_id}`;
  },
},

:href="href"

или

methods: {
  href: client_id => `https://oauth.vk.com/authorize?client_id=${client_id}`,
},

:href="href(client_id)"

const digits = Object
  .entries([...`${num}`].reduce((acc, n) => (acc[n] = (acc[n] || 0) + 1, acc), {}))
  .reduce((acc, n) => (n[1] > 1 && acc.push(+n[0]), acc), []);

или

const digits = num
  .toString()
  .split('')
  .reduce((acc, n) => (acc[n]++, acc), Array(10).fill(0))
  .map((n, i) => n > 1 && i)
  .filter(n => n !== false);

или

const digits = Array
  .from(String(num), Number)
  .filter((n, i, a) => i !== a.indexOf(n))
  .filter((n, i, a) => i === a.indexOf(n));

или

const digits = (('' + num)
  .match(/\d/g)
  .sort()
  .join('')
  .match(/(\d)\1+/g) || [])
  .map(n => n[0] | 0);

Ловите событие change, обходите элементы, собирайте запрос. В чём проблема-то? Например.

const values = [ 'text', 'move', 'lols' ];
const selector = values.map(n => `[data-cmd="${n}"]`).join(', ');
const elements = document.querySelectorAll(selector);

elements.forEach(n => n.style.display = 'none');

$('.count').on('input', e => $('.game_iframe').width(e.target.value));

или

document.querySelector('.count').addEventListener('input', function() {
  document.querySelector('.game_iframe').style.width = `${this.value}px`;
});

да всё как обычно

если нужно несколько экземпляров, стилизованных единообразно, можно сделать компонент-обёртку

https://jsfiddle.net/cvr4mgnf/

Можно сделать фильтр, метод или вычисляемое свойство:

data: () => ({
  values: [ 0, 14235534, 53423, -9678953, 3451, 5323467445, -123456 ],
}),
filters: {
  format1: val => `${val}`.replace(/\d(?=(\d{3})+$)/g, '$& '),
},
methods: {
  format2: val => val.toLocaleString('ru-RU'),
},
computed: {
  formatted() {
    return this.values.map(n => {
      const sign = Math.sign(n) === -1;
      const arr = [...String(Math.abs(n))].reverse();
      return (sign ? '-' : '') + Array.from(
        { length: Math.ceil(arr.length / 3) },
        (n, i) => arr.slice(i * 3, (i + 1) * 3).reverse().join('')
      ).reverse().join(' ');
    });
  },
},

<div>
  <div v-for="n in values">{{ n | format1 }}</div>
</div>
<div>
  <div v-for="n in values">{{ format2(n) }}</div>
</div>
<pre>{{ formatted }}</pre>

https://jsfiddle.net/3qg792sr/

Делаете метод добавления маркеров, который перед добавлением будет удалять существующие маркеры. И ещё делаете watch на массив отфильтрованных данных, на основе которого маркеры создаются - там этот метод и вызываете. Например.

Или можно создать сразу все маркеры, в watcher'e обходить исходный массив данных, и помещать на карту/убирать с карты маркер в зависимости от того, присутствует ли текущее значение в отфильтрованном массиве - тоже вариант.

class App extends React.Component {
  state = {
    music: musicButton,
  }

  onClick = e => {
    if (this.audio) {
      this.audio.pause();
    }
    this.audio = new Audio(e.target.dataset.url);
    this.audio.play();
  }

  render() {
    return (
      <div>
        {this.state.music.map(n => (
          <button onClick={this.onClick} data-url={n.url} key={n.numButton}>{n.soundsName}</button>
        ))}
      </div>
    );
  }
}