html中thymeleaf模板,判断如果改变下拉框id="xqdmc"的值为1 , 复选框 name="fenlei"重置,可选的值为11,12,13,14,15。并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为10, 复选框name="fenlei"重置,可选的值为32,并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为11, 复选框name="fenlei"重置,可选的值为21,22,并默认是选中状态,其它值不可选
时间: 2023-11-27 11:52:38 浏览: 58
可以使用Thymeleaf内置的条件语句和属性操作来实现这个功能。具体实现如下:
```html
<select id="xqdmc" onchange="resetCheckBox()">
<option value="">请选择</option>
<option value="1">下拉框值为1</option>
<option value="10">下拉框值为10</option>
<option value="11">下拉框值为11</option>
</select>
<input type="checkbox" name="fenlei" value="11" th:checked="${xqdmc == '1'}" th:disabled="${xqdmc != '1'} || ${xqdmc == ''}">
<input type="checkbox" name="fenlei" value="12" th:checked="${xqdmc == '1'}" th:disabled="${xqdmc != '1'} || ${xqdmc == ''}">
<input type="checkbox" name="fenlei" value="13" th:checked="${xqdmc == '1'}" th:disabled="${xqdmc != '1'} || ${xqdmc == ''}">
<input type="checkbox" name="fenlei" value="14" th:checked="${xqdmc == '1'}" th:disabled="${xqdmc != '1'} || ${xqdmc == ''}">
<input type="checkbox" name="fenlei" value="15" th:checked="${xqdmc == '1'}" th:disabled="${xqdmc != '1'} || ${xqdmc == ''}">
<input type="checkbox" name="fenlei" value="32" th:checked="${xqdmc == '10'}" th:disabled="${xqdmc != '10'} || ${xqdmc == ''}">
<input type="checkbox" name="fenlei" value="21" th:checked="${xqdmc == '11'}" th:disabled="${xqdmc != '11'} || ${xqdmc == ''}">
<input type="checkbox" name="fenlei" value="22" th:checked="${xqdmc == '11'}" th:disabled="${xqdmc != '11'} || ${xqdmc == ''}">
<script th:inline="javascript">
function resetCheckBox() {
var xqdmc = document.getElementById("xqdmc").value;
var checkboxes = document.getElementsByName("fenlei");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = false;
checkboxes[i].disabled = true;
}
if (xqdmc == "1") {
document.getElementsByName("fenlei").forEach((checkbox) => {
if (["11", "12", "13", "14", "15"].includes(checkbox.value)) {
checkbox.disabled = false;
checkbox.checked = true;
}
});
} else if (xqdmc == "10") {
document.getElementsByName("fenlei").forEach((checkbox) => {
if (checkbox.value == "32") {
checkbox.disabled = false;
checkbox.checked = true;
}
});
} else if (xqdmc == "11") {
document.getElementsByName("fenlei").forEach((checkbox) => {
if (["21", "22"].includes(checkbox.value)) {
checkbox.disabled = false;
checkbox.checked = true;
}
});
}
}
</script>
```
上述代码中,使用Thymeleaf内置的条件语句和属性操作来设置复选框的选中状态和禁用状态。同时,使用JavaScript代码来实现下拉框值改变时的处理逻辑。当下拉框值改变时,会调用resetCheckBox()函数,该函数根据下拉框的值来设置复选框的选中状态和禁用状态。
阅读全文