Блокирование третьей кнопки при активных двух

Question

Всем привет, использую vanilla JS, есть три кнопки категорий, максимум может быть нажато две кнопки, если две кнопки нажато на третью нажать нельзя. Могут быть нажаты любые 2 кнопки из трёх, при этом третья должна блокироваться (disabled).

const categoriesButtons = document.querySelectorAll('.service__button');

categoriesButtons.forEach((button) => {
    button.addEventListener('click', (event) => {
        if (event.target.id === 'gardens') {
            button.classList.toggle('button--active');
        }
        else if (event.target.id === 'lawn') {
            button.classList.toggle('button--active');  

        } else if (event.target.id === 'planting') {
            button.classList.toggle('button--active');
        }
        
        // if (event.target.id === 'gardens' && event.target.id === 'lawn') {
        //     plantingBtn.classList.add('.button--disabled')
        // }  => Этот код не работает
    })
})

Answer 1

При нажатых 2х кнопках, оставшейся будет установлен нужный класс. Если кнопку отжать, класс удаляется

const categoriesButtons = document.querySelectorAll('.service__button');
const selectButtons = []; // Нажатые кнопки
const allButtons = []; // Все кнопки
let disabledButton = ''; // С признаком disable

categoriesButtons.forEach((button) => {
  allButtons.push(button.id); // Записываем в справочник все найденные
  button.addEventListener('click', (event) => {
    // Добавляем или удаляем кнопку
    if (selectButtons.includes(event.target.id)) {
      selectButtons.splice(selectButtons.indexOf(event.target.id), 1)
    } else {
      selectButtons.push(event.target.id)
    }

    if (event.target.id === 'gardens') {
      button.classList.toggle('button--active');
    }
    else if (event.target.id === 'lawn') {
      button.classList.toggle('button--active');

    } else if (event.target.id === 'planting') {
      button.classList.toggle('button--active');
    }
    // Проверяем, если нажато 2, то оставшейся добавляем стиль
    if (selectButtons.length === 2) {
      disabledButton = allButtons.filter(it => !selectButtons.includes(it))[0];
      document.getElementById(disabledButton).classList.add('button--disabled');
    } else if (disabledButton) { // Иначе стиль удаляем
      document.getElementById(disabledButton)?.classList.remove('button--disabled');
      disabledButton = '';
    }
  })
})

.service__button {
  background-color: #DDDDDD;
}

.button--active {
  background-color: #11AA11;
}

.button--disabled {
  background-color: #FF5555;
  pointer-events: none;
}

<button class="service__button" id="gardens">тык раз</button>
<button class="service__button" id="lawn">тык два</button>
<button class="service__button" id="planting">тык три</button>

БЛОГ НА HUSL

Блокирование третьей кнопки при активных двух

Ответы (1 шт):