如果我在尝试禁用/启用输入字段时添加 Thymeleaf th:field，JavaScript 不起作用答案

【问题标题】：JavaScript is not working if I add Thymeleaf th:field when I try to disable/enable input fields如果我在尝试禁用/启用输入字段时添加 Thymeleaf th:field，JavaScript 不起作用
【发布时间】：2019-03-09 18:04:53
【问题描述】：

我的代码中有一些输入字段需要启用或禁用，具体取决于单击的复选框。在我添加 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 文件中引用字段的方式？

【问题讨论】：

你可以试试 "th:field=${mensaje}" 吗？
感谢您的帮助！我已经尝试过 th:field="${mensaje.mensaje}" （因为我在我的“mensaje”对象中访问一个名为“mensaje”的变量）并且我遇到了与 th:field="*{mensaje 相同的问题}”。

标签： javascript java html thymeleaf

【解决方案1】：

如下更改文本区域名称，

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

属性 th:field 将替换输入标记中的属性 value 和 name。

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

上面这行代码类似于：

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

【讨论】：