Thymeleaf - How to Add Checked Attribute to Input Conditionally

Thymeleaf - How to add checked attribute to input conditionally

According to the official thymeleaf documentation

http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#fixed-value-boolean-attributes

th:checked is considered as a fixed-value Boolean attribute.

<input type="checkbox" name="active" th:checked="${user.active}" />

Where user.active should be a boolean.

So in your case it should be as Andrea mentioned,

<input type="checkbox" name="mycheckbox" th:checked="${flag}" />

How do I get the values of all the selected check box from thymeleaf in spring boot

The answer to your question is provided in this post:
https://stackoverflow.com/a/72300493/15730570

The answer is for simple checkbox which passes one value back to controller. To pass multiple values, you will need to to tweak your thymeleaf code accordingly.

How to conditionally add checked using a django template tag without causing htmlhint to throw an error?

htmlhint is not written to be used with templating frameworks. It will largely ignore template tags wrapped in quotes, which generally isn't a problem until you conditionally need an attribute inside an html element/tag. And what's worse, it will apply rules to the template tag, such as uniqueness of an ID, so to get around these issues without turning off otherwise useful htmlhint rules, you have to figure out a work-around.

Here's a work-around I got to solve this particular problem. It's a lot more code and complexity to solve what should be a simple problem, so if anyone has a more elegant solution, please share.

To get around the conditionally added checked attribute spec-char-escape error from htmlhint, this works (as I noted in my addendum in the question):

<td>
    {% get_template_cookie selfmt 'showaverage' 'checked' as avgchkd %}
    {% if avgchkd == "checked" %}
        <input type="checkbox" id="showaverage" onclick="set_template_cookie('showaverage', this.checked ? 'checked' : '')" checked />
    {% else %}
        <input type="checkbox" id="showaverage" onclick="set_template_cookie('showaverage', this.checked ? 'checked' : '')" />
    {% endif %}
    Average
</td>

but that causes another problem: the id-unique error. And to get around that, I added an otherwise pointless template tag:

@register.simple_tag
def uniquify(retval, unused):
    return retval

Then you can make the ID's seem unique to htmlhint with:

<td>
    {% get_template_cookie selfmt 'showaverage' 'checked' as avgchkd %}
    {% if avgchkd == "checked" %}
        <input type="checkbox" id="{% uniquify 'showaverage' 1 %}" onclick="set_template_cookie('showaverage', this.checked ? 'checked' : '')" checked />
    {% else %}
        <input type="checkbox" id="{% uniquify 'showaverage' 2 %}" onclick="set_template_cookie('showaverage', this.checked ? 'checked' : '')" />
    {% endif %}
    Average
</td>

Thymeleaf - Is there a simple way to make radio checked based on condition

The <input> elements of type radio support common attribute checked. This is the Boolean attribute which accepts true and false as the possible values. Said that your Thymeleaf condition can be placed directly into the value of this attribute as follow ...

<p>
    <input th:type="radio" th:value="${role}"
      th:checked="${user.getRoles().contains(role)}" />
    <th:block th:utext="${role}"/>
</p>

More on Thymeleaf Fixed-value boolean attributes

Add conditional attribute with thymeleaf

I guess the problem is that if you declare the additional parameter in the fragment - you need to pass it. Thus, you could pass either autofocus, or empty value ('') and process the check with Thymeleaf.

For instance, you call:

<div th:replace="fragments :: formField (type='password', field='password', 
     placeholder='resetPassword.form.password', autofocus='')">

Then process it with:

<div th:fragment="formField">
    <input th:if="${!autofocus.isEmpty()}" th:type="${type}"
           th:errorclass="field_error" th:field="*{__${field}__}"
           th:placeholder="#{__${placeholder}__}" autofocus="true"/>
    <input th:if="${autofocus.isEmpty()}" th:type="${type}"
           th:errorclass="field_error" th:field="*{__${field}__}"
           th:placeholder="#{__${placeholder}__}"/>
</div>

Or:

<div th:fragment="formField" th:switch="${autofocus}">
    <input th:case="'autofocus'" th:type="${type}"
           th:errorclass="field_error" th:field="*{__${field}__}"
           th:placeholder="#{__${placeholder}__}" autofocus="true"/>
    <input th:case="*" th:type="${type}" th:errorclass="field_error"
           th:field="*{__${field}__}"
           th:placeholder="#{__${placeholder}__}"/>
</div>

But I guess James comment to use th:autofocus would be the best solution:

<div th:fragment="formField">
        <input th:type="${type}" th:errorclass="field_error" 
               th:field="*{__${field}__}" th:placeholder="#{__${placeholder}__}" 
               th:autofocus="${!autofocus.isEmpty()}" />
</div>

In all the cases you still need to pass autofocus="autofocus" or autofocus="" as a parameter.

---

Related Topics