使用Thymeleaf-Spring跨模板生成单选按钮
我很难用我想要的行为创建一个动态表单。我认为我有一个解决方案，但我认为必须有一个更好的解决方案。
我用的是Thymeleaf-Spring。
目标
我正在创建一个动态表单，它将包括一个包含邮政地址的表。在可用的地址中，一个要标记为主地址。有关示例，请参见这把小提琴。
问题
短版本--每行都有一个单选按钮，我需要在行级别作为复选框(已经接受了，这必须通过JS完成)，并在表级别上充当单选按钮。
表体是使用以下代码设置的。
<tr th:each="addr : ${addresses}" th:include="address :: row"
th:with="prefix=__${prefix}__.address[__${addrStat.index}__]."/>前缀变量赋值是存在的，因为此表在窗体上嵌套了几个级别。它所做的就是将额外的数据附加到已经存在的前缀中。
正在提取的地址片段如下所示(为了简洁起见，这里压缩格式)：
<tr th:fragment="row">
<td>
<input type="text" th:field="*{__${prefix}__line1}"/>
<input type="text" th:field="*{__${prefix}__line2}"/>
</td>
<td><input type="text" th:field="*{__${prefix}__city}"/></td>
<td><select th:field="*{__${prefix}__state}"/></td>
<td><input type="text" th:field="*{__${prefix}__zip}"/></td>
<td><select th:field="*{__${prefix}__type}"/></td>
<td><input type="checkbox" th:field="*{__${prefix}__valid}"/></td>
<td>
<input type="radio"
th:field="*{__${prefix}__primary}"
th:value="*{__${prefix}__primary}"
th:checked="*{__${prefix}__primary}"/>
</td>
</tr>在选中单选按钮时，将设置一点jQuery，以确保元素的值为true，否则将确保false。
问题是当Thymeleaf生成这些行时，根据th:field中的值为每个单选按钮分配一个唯一的名称和id。当然，这会产生每个单选按钮在它自己的组中的不需要的行为。它们都可以同时进行选择，而不是在任何给定的时间只选择表中的一个。
我尝试的第一个解决方案是修改父行以包含一个新的group变量：
<tr th:each="addr: ${addresses}" th:include="address :: row"
th:with="group='__${prefix}__primaryAddress',
prefix='__${prefix}__address[__${addrStat.index}__].'"/>然后将单选按钮上的th:field属性替换为单独的th:id和th:name属性：
<input type="radio"
th:id="'__${prefix}__primary'"
th:name="${group}"
th:value="*{__${prefix}__primary}"
th:checked="*{__${prefix}__primary}"/>这在表单上给出了想要的行为，但代价是在回发时丢失了值。Thymeleaf-Spring不能再将form元素连接到object属性。这当然是不可接受的。
电流溶液
我目前的解决方案(我并不特别喜欢)是坚持使用连接到object属性的th:field属性，并包含一个data-group属性，这将允许我通过jQuery强制分组。
<input type="radio"
th:field="*{__${prefix}__primary}"
th:value="*{__${prefix}__primary}"
th:checked="*{__${prefix}__primary}"
th:attr="data-group=${group}"/>就像我说的，我并不特别喜欢这个解决方案，因为我觉得我正在重写(或者重复)单选按钮的标准行为，但是我找不到其他方法。此时Thymeleaf似乎无法处理跨对象的单选按钮列表。
我想其他人也遇到了同样的限制。你是怎么克服的？我目前的解决方案是目前可用的最佳方案吗？有人能提供更好的选择吗？
谢谢您抽时间见我。
回答 1
Stack Overflow用户
发布于 2018-03-21 09:08:14
我认为您的问题是在表单中只选择一个单选按钮。因为您仍然需要对单选按钮应用唯一的名称来维护面向对象的方法。可以应用下面的JavaScript来强制只选择一个项并取消选择保留在同一页面上的内容：
$(document).ready(function(e) {
$("input[type=radio]").change(function() {
$('input[type=radio]:checked').not(this).prop('checked', false);
});
});如果在此页上有另一组单选按钮，则可以更改选择器。
https://stackoverflow.com/questions/19865335
复制相似问题
腾讯云开发者
