チェックボックス - CSS効果が機能しない

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オーバーライドが得られます。