Пользовательские флажки CSS

Question

У меня есть страница с 30 флажками.Это для бронирования мест.Теперь я попытался их стилизовать.

.seatlayout{
  border: 1px solid;
  display: table;
  width: 30%;
  padding: 6% 2% 0% 2%;
  border-radius: 5%;
}
.seat{
  position: relative;
  width: 22%;
  margin-bottom: 10%;
  float: left;
  text-align: center;
  border: 1px solid #ccc;
}
[class*='seatcont'],
.seatdis{
  position: relative;
  width: 100%;
  height: 100%;
}

[class^="seatcon"] label,
.seatdis label{
  background-color: #f1f2ed;
  cursor: pointer;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

[class^="seatcon"] input[type="checkbox"] ,
.seatdis input[type="checkbox"] {
  z-index:10

}

[class^="seatcon"] input[type="checkbox"]:checked + label
{
  background-color: #66bb6a;
}

.seatdis input[type="checkbox"]:checked + label{
  background-color: grey;
  pointer-events: none
}

[class^="seatcon"] input[type="checkbox"]:checked +  
label:after {
  opacity: 1;
}

<div class="seatlayout">
 <div class="seat">
    <div class="seatcont1">
       <input type="checkbox id="checkbox">
       <label for="checkbox" id="lab1">
    </div>
 </div>
 <div class="seat">
    <div class="seatcont2">
       <input type="checkbox id="checkbox">
       <label for="checkbox" id="lab2">
    </div>
 </div>
 <div class="seat">
    <div class="seatcont3">
       <input type="checkbox id="checkbox">
       <label for="checkbox" id="lab3">
    </div>
 </div>
</div>

Проблема Независимо от того, на каком месте я нажимаю, всегда проверяется первое.Я пробовал несколько подходов, добавляя уникальные классы и идентификаторы при работе с подстановочными знаками.Любая помощь будет высоко оценена!

Answer 1

Вы поставили один и тот же идентификатор на все свои флажки.Вы должны дать им всем другое удостоверение личности.Кроме того, вам не хватает конечной кавычки на всех ваших флажках после типа.

<input type="checkbox" id="checkbox">
<label for="checkbox" id="lab1">

....

<input type="checkbox" id="checkbox2">
<label for="checkbox2" id="lab1">

Answer 2

Есть несколько неправильных вещей.Элемент label никогда не закрывается.Элемент label не нуждается в id, это атрибут for, который должен соответствовать идентификатору input.Во-вторых, input флажков никогда не закрывается ".В-третьих, id всегда должен быть уникальным, это уникальный id entifier .Поэтому каждый вход должен иметь свой уникальный идентификатор.

.seatlayout{
  border: 1px solid;
  display: table;
  width: 30%;
  padding: 6% 2% 0% 2%;
  border-radius: 5%;
}
.seat{
  position: relative;
  width: 22%;
  margin-bottom: 10%;
  float: left;
  text-align: center;
  border: 1px solid #ccc;
}
[class*='seatcont'],
.seatdis{
  position: relative;
  width: 100%;
  height: 100%;
}

[class^="seatcon"] label,
.seatdis label{
  background-color: #f1f2ed;
  cursor: pointer;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

[class^="seatcon"] input[type="checkbox"] ,
.seatdis input[type="checkbox"] {
  z-index:10

}

[class^="seatcon"] input[type="checkbox"]:checked + label
{
  background-color: #66bb6a;
}

.seatdis input[type="checkbox"]:checked + label{
  background-color: grey;
  pointer-events: none
}

[class^="seatcon"] input[type="checkbox"]:checked +  
label:after {
  opacity: 1;
}

<div class="seatlayout">
 <div class="seat">
    <div class="seatcont1">
       <input type="checkbox" id="checkbox1">
       <label for="checkbox1"> 1</label>
    </div>
 </div>
 <div class="seat">
    <div class="seatcont2">
       <input type="checkbox" id="checkbox2">
       <label for="checkbox2"> 2</label>
    </div>
 </div>
 <div class="seat">
    <div class="seatcont3">
       <input type="checkbox" id="checkbox3">
       <label for="checkbox3"> 3</label>
    </div>
 </div>
</div>

Answer 3

У вас одинаковый идентификатор для каждого флажка.Вы должны использовать уникальный идентификатор для каждого.