JavaScript is not working if I add Thymeleaf th:field when I try to disable/enable input fields

Question

I have some input fields in my code that I need to enable or disable depending on which checkbox is clicked. It was working fine until I added the th:field part to store the value of the fields in the th:object. Now my JavaScript doesn't work, so the fields always remain disabled.

This is one of the fields in my html file:

<div class="form-group form-inline form-xtra required">
    <label>Texto mensaje:</label>
    <div class="form-item">
        <textarea cols="200" name="seleccionExcel" class="user-form-control 
        input-md" th:field="*{mensaje}" id="textoExcel" disabled="disabled"> 
        </textarea>
    </div>
</div>

This is the JavaScript file:

$(function() {

$(".introducirManual").click(function(){
    $('input[name="seleccionManual"]').prop('disabled', false);
    $('textarea[name="seleccionManual"]').prop('disabled', false);  
    $('input[name="seleccionExcel"]').prop('disabled', true);
    $('input[name="seleccionExcel"]').val('');
    $('textarea[name="seleccionExcel"]').prop('disabled', true);
    $('textarea[name="seleccionExcel"]').val('');
});

$(".introducirExcel").click(function(){  
    $('input[name="seleccionExcel"]').prop('disabled', false);
    $('textarea[name="seleccionExcel"]').prop('disabled', false);
    $('input[name="seleccionManual"]').prop('disabled', true);
    $('input[name="seleccionManual"]').val('');
    $('textarea[name="seleccionManual"]').prop('disabled', true);
    $('textarea[name="seleccionManual"]').val('');
    $('input[id="numLibreta"]').val('');
});

});

If I remove the

th:field="*{mensaje}"

, the script works fine again.

Should I change the way I refer to the field in my JavaScript file when using Thymeleaf?

Answer 1

Change textarea name as below,

$('textarea[name="mensaje"]').prop('disabled', true);

Attribute th:field will replace attributes value and name in your input tag.

<textarea cols="200" name="seleccionExcel" class="user-form-control  input-md" th:field="*{mensaje}" id="textoExcel" disabled="disabled"> </textarea>

the above line of code is similar to:

<textarea cols="200" name="mensaje" class="user-form-control  input-md" id="textoExcel" disabled="disabled"> </textarea>