java - 复选框 - CSS 效果不起作用

Question

我有一个我无法解决的问题。我想做这个效果:点击http://codepen.io/siiron/pen/MYXZWg

将数据从 View 传递到 Controller 工作正常，单击复选框后的数据正确地订阅了 IdsDTO 中的列表。 CSS 效果不起作用，当您单击复选框时，颜色不会变为绿色并且视觉上没有任何反应。

有什么想法吗？谢谢!

DTO:

public class IdsDTO {

    private List<Integer> ids = new ArrayList<>();

    public List<Integer> getIds() {
        return ids;
    }

    public void setIds(List<Integer> ids) {
        this.ids = ids;
    }
}

Controller :

@GetMapping("/hall")
public String showHall(){

      IdsDTO idsDTO = new IdsDTO();

      model.addAttribute("idsDTO", idsDTO);      

      return "someHall";
} 

查看:

...

<form action="#" th:action="@{/hall}" th:object="${idsDTO}" method="post">
      ...

   <li class="seat">
       <input type="checkbox" id="1A" th:field="*{ids}" th:value="${1}" />
       <label for="1A"></label>
   </li>
   <li class="seat">
       <input type="checkbox" id="1B" th:field="*{ids}" th:value="${2}"  />
       <label for="1B"></label>
   </li>
    ...

</form>

编辑 1:

我的CSS:

.seats {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.seat {
  display: flex;
  flex: 0 0 14.28571428571429%;
  padding: 5px;
  position: relative;
}
.seat:nth-child(3) {
  margin-right: 14.28571428571429%;
}
.seat input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.seat input[type=checkbox]:checked + label {
  background: #00B70C;
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.seat input[type=checkbox]:disabled + label {
  background: #D00000;
  text-indent: -9999px;
  overflow: hidden;
}
.seat input[type=checkbox]:disabled + label:after {
  text-indent: 0;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translate(-50%, 0%);
}
.seat input[type=checkbox]:disabled + label:hover {
  box-shadow: none;
  cursor: not-allowed;
}
.seat label {
  display: block;
  position: relative;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5rem;
  padding: 4px 0;
  background: #949494;
  border-radius: 5px;
  animation-duration: 300ms;
  animation-fill-mode: both;
}
.seat label:before {
  content: "";
  position: absolute;
  width: 75%;
  height: 75%;
  top: 1px;
  left: 50%;
  transform: translate(-50%, 0%);
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
}
.seat label:hover {
  cursor: pointer;
  box-shadow: 0 0 0px 2px #5C6AFF;
}

我也试过这种方式:

<form action="#" th:action="@{/hall}" method="post">

   <li class="seat">
      <input type="checkbox" id="1E" th:value="${5}" name="list" />
      <label for="1E">1E</label>
   </li>
   <li class="seat">
      <input type="checkbox" id="1F" th:value="${6}" name="list" />
      <label for="1F">1F</label>
   </li>

</form>

Controller :

@GetMapping("/hall")
public String showHall(){

      ArrayList<Integer> list = new ArrayList<>();

      model.addAttribute("list", list);

  return "someHall";
} 

并且 css 效果有效，颜色变为绿色，但还有另一个问题。只有第一个选中的复选框被添加到 ArrayList，而下一个则没有。

EDIT2

我是这样解决的:

Controller :

@GetMapping("/hall")
public String showHall(){

      IdsDTO idsDTO = new IdsDTO();

      model.addAttribute("idsDTO", idsDTO);      

      return "someHall";
} 

查看:

...

<form action="#" th:action="@{/hall}" th:object="${idsDTO}" method="post">
      ...

   <li class="seat">
       <input type="checkbox" id="1A" th:value="${1}" name="ids" />
       <label for="1A"></label>
   </li>
   <li class="seat">
       <input type="checkbox" id="1B" th:value="${2}" name="ids" />
       <label for="1B"></label>
   </li>
    ...

</form>

现在，一切正常!

Answer 1

尝试禁用您的 Bootstrap 和其他 css 文件。如果问题解决了，那么这些文件中的复选框输入就有了 css 覆盖。