Question

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

将数据从视图传递到控制器工作正常，单击复选框后的数据正确订阅了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;
    }
}

控制器：

@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>

EDIT1：

我的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>

控制器：

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

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

      model.addAttribute("list", list);

  return "someHall";
}

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

EDIT2

我这样解决了：

控制器：

@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

尝试禁用引导程序和其他css文件。如果问题解决了，那么您已经为这些文件中的复选框输入获得了css覆盖。

复选框 - CSS效果不起作用

1 个答案: