如何为PHP循环生成的TouchSpin输入框设置各自的max值

你当前的代码中，$('.ts').attr("max")只会获取第一个匹配元素的max属性值，导致所有TouchSpin组件共用同一个max限制。要实现每个输入框对应不同的max值，需要遍历每个输入框，单独初始化并读取对应元素的max属性。

修改后的jQuery代码 #

$('.ts').each(function() {
    // 获取当前输入框的max属性值，转为数字类型
    const maxValue = parseFloat($(this).attr('max'));
    $(this).TouchSpin({
        min: 0,
        max: maxValue,
        step: 0.1,
        decimals: 2,
        boostat: 5,
        maxboostedstep: 10,
    });
});

代码说明 #

• 使用.each()遍历所有带.ts类的输入框，确保每个元素被单独处理
• 用$(this)指代当前循环到的输入框，读取它自身的max属性值
• 通过parseFloat()将属性值从字符串转为数字，避免TouchSpin因类型不匹配出现异常

可选优化（PHP层） #

你也可以在生成输入框时，把max值存入data-*属性，让逻辑更清晰：

<input class="ts" id="remain_{{ $chemical->id }}" name="remain_{{ $chemical->id }}" type="number" max="{{ $chemical->weight - $sum }}" data-max="{{ $chemical->weight - $sum }}">

对应JS部分改为：

const maxValue = parseFloat($(this).data('max'));

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