Thymeleaf and Bootstrap Checkbox - How to use th:field with checkbox button group

Viewed 264

I am using Bootstrap checkbox button group (link) with thymeleaf. The Bootstrap checkbox button requires <label> tag to be right below <input> in order to highlight the correct checkbox button. The issue is whenever I add the th:field="*{property_name}" in the input field as below:

<input value="Text" type="checkbox" class = "btn-check" id="text" autocomplete="off"  name = "course_format" th:field="*{formats}">
<label class="btn btn-outline-info" for="text">Text</label>

Thymeleaf adds a hidden input element

<input type="hidden" name="_formats" value="on">

just below my <input type = "checkbox"> element Therefore, the checkbox button fails to get highlighted although it gets selected.

HTML code snippet

<form method="POST" th:action="@{/submitCourse}" th:object="${coursePost}">
  <div class="mb-3">
      <label for="courseFormat" class="form-label">Course Format(Select all that apply)</label>
      <div class= "btn-group" role="group">
            <input value="Text" type="checkbox" class = "btn-check" id="text" autocomplete="off"  name = "course_format" th:field="*{formats}">
            <label class="btn btn-outline-info" for="text">Text</label>


            <input value="Video" type="checkbox" class = "btn-check" id="video" autocomplete="off"  name = "course_format" th:field="*{formats}">
            <label class="btn btn-outline-info" for="video">Video</label>

            <input value="Quiz" type="checkbox" class = "btn-check" id="quiz" autocomplete="off"  name = "course_format" th:field="*{formats}">
            <label class="btn btn-outline-info" for="quiz">Quiz</label>

            <input value="Certificated" type="checkbox" class = "btn-check" id="certificated" autocomplete="off" name = "course_format" th:field="*{formats}">
            <label class="btn btn-outline-info" for="certificated">Certificated</label>

      </div>
   </div>
 </form>

Thymeleaf generated HTML

<form method="POST" action="/submitCourse">
 <div class="mb-3">
      <label for="courseFormat" class="form-label">Course Format(Select all that apply)</label>
      <div class="btn-group" role="group">
          <input value="Text" type="checkbox" class="btn-check" id="text" autocomplete="off" name="formats">
          <input type="hidden" name="_formats" value="on"> <!-- generated by thymeleaf which is causing the issue(which is the checkbox button not getting highlighted -->
          <label class="btn btn-outline-info" for="text">Text</label>


          <input value="Video" type="checkbox" class="btn-check" id="video" autocomplete="off" name="formats">
          <input type="hidden" name="_formats" value="on">
          <label class="btn btn-outline-info" for="video">Video</label>

            <input value="Quiz" type="checkbox" class="btn-check" id="quiz" autocomplete="off" name="formats">
            <input type="hidden" name="_formats" value="on">
            <label class="btn btn-outline-info" for="quiz">Quiz</label>

            <input value="Certificated" type="checkbox" class="btn-check" id="certificated" autocomplete="off" name="formats">
            <input type="hidden" name="_formats" value="on">
            <label class="btn btn-outline-info" for="certificated">Certificated</label>

      </div>
    </div>
   </form>
0 Answers
Related