Make image clickable based on certain condition in Thymeleaf

Question

i am gettting an attribute html "image_clickable_status " , if it is true , i need to make the image clickable and if it is false the image should not be clickable. Below is what i am trying to do

<div th:switch=${image_clickable_status}>

 <a th:case=“true ” th:href="@{/getConsent/yes}">
<a th:case=“false ” th:href=“#”>
<img 

 src="https://samplegoogle.img" alt="viu"/>
</a>
 </a>

 </div>

But this is not working , any ideas how to handle this situation in a better way.

Answer 1

You could use pointer-events: none; .

eg

<a th:style="${image_clickable_status} ? '' : 'pointer-events: none;'" 
   th:href="@{/getConsent/yes}">
    <img src="https://samplegoogle.img" alt="viu"/>
</a>

Answer 2

You might want to use if-else statement to distinguish a link from a paragraph:

<div th:if="${image_clickable_status}">
    <a th:case=“true ” th:href="@{/getConsent/yes}">
        <img  src="https://samplegoogle.img" alt="viu"/>
    </a>
</div>
<div th:unless="${image_clickable_status}">
    <img  src="https://samplegoogle.img" alt="viu"/>
</div>

The solution above is a bit verbose. Alternatively, use the style to make the link not-clickable and a cursor pointer default.

<a th:style="${image_clickable_status} ? '' : " + 
            "'pointer-events: none; cursor: default;'" 
   th:href="@{/getConsent/yes}">

    <img src="https://samplegoogle.img" alt="viu"/>
</a>