html中thymeleaf模板,添加页面,判断如果改变下拉框id="xqdmc"的值为1 , 复选框 <div class="col-sm-9" th:with="type=${@dict.getType('xqd_jcy_lb')}"> <label th:each="dict : ${type}" class="check-box"> <input name="fenlei" type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}" > </label> </div> name="fenlei"重置，可选的值为11,12,13,14,15。并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为2 , 复选框 name="fenlei"重置，可选的值为12 ，并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为10, 复选框name="fenlei"重置,可选的值为32,并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为11, 复选框name="fenlei"重置,可选的值为21,22,并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为12, 复选框name="fenlei"重置,可选的值为21,22,并默认是选中状态,其它值不可选。

可以通过Thymeleaf中的条件判断语句th:if和th:unless实现上述处理逻辑。具体代码如下：

<div class="form-group">
    <label class="col-sm-3 control-label">选区名称：</label>
    <div class="col-sm-9">
        <select id="xqdmc" name="xqdmc">
            <option value="1">选区1</option>
            <option value="2">选区2</option>
            <option value="10">选区10</option>
            <option value="11">选区11</option>
            <option value="12">选区12</option>
        </select>
    </div>
</div>

<div class="form-group">
    <label class="col-sm-3 control-label">分类：</label>
    <div class="col-sm-9" th:with="type=${@dict.getType('xqd_jcy_lb')}">
        <label th:each="dict : ${type}" class="check-box">
            <input type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}"
                th:checked="${#strings.contains(fenlei, dict.dictValue)}" th:disabled="${#strings.contains(fenlei, dict.dictValue) and not #strings.contains(fenlei, defaultFenlei)}">
        </label>
    </div>
</div>

<script th:inline="javascript">
    /* 定义默认可选的分类 */
    var defaultFenlei = ["11", "12", "13", "14", "15"];

    /* 当选择选区1时，类型可选值为11,12,13,14,15 */
    var xqdmc1Fenlei = ["11", "12", "13", "14", "15"];

    /* 当选择选区2时，类型可选值为12 */
    var xqdmc2Fenlei = ["12"];

    /* 当选择选区10时，类型可选值为32 */
    var xqdmc10Fenlei = ["32"];

    /* 当选择选区11或12时，类型可选值为21,22 */
    var xqdmc11_12Fenlei = ["21", "22"];

    /* 监听选区名称下拉框改变事件 */
    $("#xqdmc").change(function() {
        /* 获取当前选中的选区名称 */
        var xqdmc = $(this).val();

        /* 根据选中的选区名称设置可选的分类 */
        if (xqdmc === "1") {
            defaultFenlei = xqdmc1Fenlei;
        } else if (xqdmc === "2") {
            defaultFenlei = xqdmc2Fenlei;
        } else if (xqdmc === "10") {
            defaultFenlei = xqdmc10Fenlei;
        } else if (xqdmc === "11" || xqdmc === "12") {
            defaultFenlei = xqdmc11_12Fenlei;
        }

        /* 重置分类复选框 */
        $("input[name='fenlei']").prop("checked", false);
        $("input[name='fenlei']").prop("disabled", true);

        /* 设置默认可选的分类 */
        $.each(defaultFenlei, function(index, value) {
            $("input[name='fenlei'][value='" + value + "']").prop("checked", true);
            $("input[name='fenlei'][value='" + value + "']").prop("disabled", false);
        });
    });
</script>

上述代码中，首先定义了默认可选的分类数组defaultFenlei和根据选中的选区名称设置可选的分类数组xqdmc1Fenlei、xqdmc2Fenlei、xqdmc10Fenlei、xqdmc11_12Fenlei，然后通过Thymeleaf的条件判断语句th:if和th:unless以及JavaScript监听下拉框改变事件来实现动态设置分类复选框的可选状态和默认选中状态的功能。对于已经选中的分类，通过设置th:checked属性为true来保持其选中状态，同时设置th:disabled属性为true来禁止其再次选择。