JSFiddle - React, Tailwind, and code Playground
HTML
<div class="row">
<div class="seat"></div>
<div class="seat"></div>
<div class="seat selled"></div>
</div>
<div class="row">
<div class="seat selled"></div>
<div class="seat"></div>
<div class="seat selled"></div>
<div class="seat selled"></div>
<div class="seat"></div>
</div>
<button disabled="true">Нечего сохранять!</button>
CSS
div.row {
height: 25px;
margin: 10px 0;
text-align: center;
}
div.seat {
border; 1px solid #F00;
background: #AAF;
cursor: pointer;
display: inline-block;
height: 25px;
width: 25px;
}
div.seat.selled {
background-color: #FFA;
cursor: default;
}
div.seat.selected {
background-color: #FAA;
}
JavaScript
$$('div.seat:not(.selled)').addEvent('click', function() {
this.toggleClass('selected');
var selectedAmount = $$('div.seat.selected').length;
if (selectedAmount != 0) {
$$('button').set('disabled', false);
$$('button').set('text', 'Сохранить(выбрано '+selectedAmount+')');
} else {
$$('button').set('disabled', true);
$$('button').set('text', 'Нечего сохранять!');
}
});