AngularJS：根据选中复选框动态设置表格输入框最大值

嘿，这个需求不难实现，核心就是给复选框绑定事件监听，根据选中状态动态修改对应输入框的max属性。我分HTML结构、JavaScript逻辑两部分给你详细说明，代码直接就能用～

1. 基础HTML结构（含动态渲染逻辑） #

首先我们搭好页面框架，表格内容从JSON数据里动态生成，后续修改数据会更灵活：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态设置输入框最大值</title>
    <style>
        table { border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        th { background-color: #f5f5f5; }
    </style>
</head>
<body>
    <table id="dataTable">
        <thead>
            <tr>
                <th>单位</th>
                <th>金额</th>
                <th>按单位限制</th>
                <th>按金额限制</th>
                <th>输入值</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <script>
        // 你的JSON数据源
        const data = [
            { units: 10, amounts: 100 },
            { units: 20, amounts: 200 },
            { units: 15, amounts: 150 },
            { units: 25, amounts: 250 }
        ];

        // 动态渲染表格
        const tbody = document.querySelector('#dataTable tbody');
        data.forEach((item, index) => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${item.units}</td>
                <td>${item.amounts}</td>
                <td><input type="checkbox" class="unit-checkbox" data-index="${index}"></td>
                <td><input type="checkbox" class="amount-checkbox" data-index="${index}"></td>
                <td><input type="number" class="input-field" data-index="${index}"></td>
            `;
            tbody.appendChild(row);
        });
    </script>
</body>
</html>

2. 核心逻辑：监听复选框，动态设置输入框最大值 #

接下来给复选框添加change事件监听，根据选中状态修改对应输入框的max属性。这里用data-index把复选框、输入框和JSON数据的索引绑定，能快速找到对应数据；同时做了单选互斥的逻辑（选中一个自动取消另一个），你也可以根据需求调整：

// 获取所有复选框和输入框
const unitCheckboxes = document.querySelectorAll('.unit-checkbox');
const amountCheckboxes = document.querySelectorAll('.amount-checkbox');
const inputFields = document.querySelectorAll('.input-field');

// 单位复选框事件监听
unitCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const index = this.dataset.index;
        const input = inputFields[index];
        const unitValue = data[index].units;

        if (this.checked) {
            // 选中时设置最大值为单位值，同时取消金额复选框选中
            amountCheckboxes[index].checked = false;
            input.max = unitValue;
        } else {
            // 取消选中时，若金额复选框也没选中则清除最大值限制
            if (!amountCheckboxes[index].checked) {
                input.removeAttribute('max');
            }
        }
    });
});

// 金额复选框事件监听
amountCheckboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const index = this.dataset.index;
        const input = inputFields[index];
        const amountValue = data[index].amounts;

        if (this.checked) {
            // 选中时设置最大值为金额值，同时取消单位复选框选中
            unitCheckboxes[index].checked = false;
            input.max = amountValue;
        } else {
            // 取消选中时，若单位复选框也没选中则清除最大值限制
            if (!unitCheckboxes[index].checked) {
                input.removeAttribute('max');
            }
        }
    });
});

可选调整：支持同时选中两个复选框 #

如果你想允许同时选中两个复选框，比如取两个值中的较小值作为最大值，可以把事件逻辑改成这样：

// 通用的更新最大值函数
function updateMaxValue(index) {
    const input = inputFields[index];
    const unitChecked = unitCheckboxes[index].checked;
    const amountChecked = amountCheckboxes[index].checked;
    const unitValue = data[index].units;
    const amountValue = data[index].amounts;

    if (unitChecked && amountChecked) {
        // 同时选中，取较小值作为最大值
        input.max = Math.min(unitValue, amountValue);
    } else if (unitChecked) {
        input.max = unitValue;
    } else if (amountChecked) {
        input.max = amountValue;
    } else {
        // 都没选中，清除最大值限制
        input.removeAttribute('max');
    }
}

// 给两个复选框绑定同一个更新函数
unitCheckboxes.forEach((checkbox, index) => {
    checkbox.addEventListener('change', () => updateMaxValue(index));
});

amountCheckboxes.forEach((checkbox, index) => {
    checkbox.addEventListener('change', () => updateMaxValue(index));
});

这样不管选中单个还是同时选中两个，输入框的最大值都会自动匹配你的需求啦～

内容的提问来源于stack exchange，提问作者kprogrammer