如果在尝试禁用/启用输入字段时添加 Thymeleaf th:field

Question

我的代码中有一些输入字段，需要根据单击的复选框启用或禁用它们。它工作正常，直到我添加了 th:field 部分来存储 th:object 中的字段值。现在我的 JavaScript 不起作用，因此这些字段始终处于禁用状态。

这是我的 html 文件中的字段之一：

<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>

这是 JavaScript 文件：

$(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('');

});

});

如果我删除

th:field="*{mensaje}"

，脚本再次正常工作。

使用 Thymeleaf 时，我应该更改引用 JavaScript 文件中字段的方式吗？

Answer 1

如下更改文本区域名称，$('textarea[name="mensaje"]').prop('disabled',&nbsp;true);属性th:field将替换输入标签中的属性值和名称。<textarea&nbsp;cols="200"&nbsp;name="seleccionExcel"&nbsp;class="user-form-control&nbsp;&nbsp;input-md"&nbsp;th:field="*{mensaje}"&nbsp;id="textoExcel"&nbsp;disabled="disabled">&nbsp;</textarea>上面的代码行类似于：<textarea&nbsp;cols="200"&nbsp;name="mensaje"&nbsp;class="user-form-control&nbsp;&nbsp;input-md"&nbsp;id="textoExcel"&nbsp;disabled="disabled">&nbsp;</textarea>