如何将jQuery变量值赋值到输入框？多次尝试均失败

核心问题排查 #

你的代码存在几个关键问题，导致输入框值无法正常更新：

1. 故障变量未初始化：fail_TruckAirLines、fail_TruckBattery等变量没有初始值，参与计算时会得到NaN（非数字），此时调用val()设置值不会产生可见效果。
2. 输入框可能被禁用：HTML中的${disabled( 'TruckFailCount')}如果渲染后生成disabled属性，虽然JS可以修改禁用输入框的值，但页面不会显示变化，且表单提交时该值不会被携带。
3. 缺少调试验证：没有打印truckFailsTot的值，无法确认计算结果是否正确。

修正步骤与代码 #

1. 初始化所有故障变量 #

在脚本最开头，将所有故障计数变量初始化为0，避免出现NaN：

// 初始化所有故障计数变量为0
var fail_TruckAirCompressor = 0,
    fail_TruckAirLines = 0,
    fail_TruckBattery = 0,
    fail_TruckBeltsHoses = 0,
    fail_TruckBody = 0,
    fail_TruckBrakesAccessories = 0,
    fail_TruckBrakesParking = 0,
    fail_TruckBrakesService = 0,
    fail_TruckClutch = 0,
    fail_TruckCouplingDevicesHitch = 0,
    fail_TruckDefrosterHeater = 0,
    fail_TruckDriveLine = 0,
    fail_TruckExhaustMuffler = 0,
    fail_TruckFluidLevels = 0,
    fail_TruckFuelTanks = 0,
    fail_TruckHorn = 0,
    fail_TruckLights = 0,
    fail_TruckMirrors = 0,
    fail_TruckSafetyEquipment = 0,
    fail_TruckSteeringMechanism = 0,
    fail_TruckTiresRimsWheels = 0,
    fail_TruckWindows = 0,
    fail_TruckWindshieldWipers = 0;

2. 修复输入框状态（可选但关键） #

如果输入框不需要手动编辑，建议用readonly替代disabled，这样JS可以修改值且页面能显示变化，同时表单提交时会携带该值：
修改HTML中的输入框属性：

<input class="form-control" ${readonly( 'TruckFailCount')} id="TruckFailCount" maxlength="13" name="TruckFailCount" title="truckFailCount" type="text" value="${row.truckFailCount?html}" />

如果模板不支持readonly方法，直接写readonly="readonly"即可。

3. 正确设置输入框值并添加调试 #

在计算完总和后，添加调试日志并调用正确的val()方法：

jQuery('body').on("change",'#TruckAirCompressor',function(){
    if (this.value == "Fail") {
        fail_TruckAirCompressor = 1;
    } else if (this.value == "Pass") { 
        fail_TruckAirCompressor = 0;
    }
    
    truckFailsTot = fail_TruckAirCompressor + fail_TruckAirLines + fail_TruckBattery 
        + fail_TruckBeltsHoses + fail_TruckBody + fail_TruckBrakesAccessories + fail_TruckBrakesParking
        + fail_TruckBrakesService + fail_TruckClutch + fail_TruckCouplingDevicesHitch 
        + fail_TruckDefrosterHeater + fail_TruckDriveLine + fail_TruckExhaustMuffler
        + fail_TruckFluidLevels + fail_TruckFuelTanks + fail_TruckHorn + fail_TruckLights
        + fail_TruckMirrors + fail_TruckSafetyEquipment + fail_TruckSteeringMechanism
        + fail_TruckTiresRimsWheels + fail_TruckWindows + fail_TruckWindshieldWipers;

    // 调试：确认总和是否正确
    console.log('故障总数：', truckFailsTot);
    // 设置输入框值
    $('#TruckFailCount').val(truckFailsTot);
}); 

额外建议 #

• 为每个故障单选按钮绑定相同的change事件处理函数，确保任何选项变更时都能重新计算总和。
• 把计算总和的逻辑封装成独立函数，避免重复代码。

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