动态表格中基于Select与Input条件修改父元素类名的实现问题

遍历所有带有taskItemsDetails类的input元素，满足以下两个条件时，将该input对应的底部父元素（原class为specialCheckbox2的div）的类名修改为specialCheckbox3：

• input的值大于0
• 对应同编号（如r1对应r1）的带有actualTaskName类的select选中项的data-category为'T'

提供的HTML结构 #

<select name="r1_Taskname" id="r1_Taskname" class="actualTaskName">
    <option></option>
    <option data-category="T" value="1">management</option>
<option data-category="T" value="2">Admin</option>
</select>

<input name="r1_Monday" id="r1_Monday" value="0.00" size="3" autocomplete="off" class="taskItemsDetails">

<select name="r2_Taskname" id="r2_Taskname" class="actualTaskName">
    <option></option>
    <option data-category="T" value="1">management</option>
<option data-category="T" value="2">Admin</option>
</select>

<input name="r2_Monday" id="r2_Monday" value="0.00" size="3" autocomplete="off" class="taskItemsDetails">

目标修改的元素结构 #

<div class="specialCheckbox2"><input class="checktip" type="checkbox" value="1" name="w1_Monday" id="w1_Monday"><label for="w1_Monday"></label></div>

已尝试的代码 #

jQuery(function($){
        $('.taskItemsDetails').each(function(i, obj) {
            // get the class of the select and check its data attribute, if its T then do action else ignore it 
        });
    }

解决方案 #

实现思路 #

1. 从当前input的ID中提取编号前缀（如r1_Monday提取出r1）
2. 通过编号前缀定位对应actualTaskName类的select元素
3. 获取select选中项的data-category属性，判断是否为'T'
4. 将input的值转为数字，判断是否大于0
5. 若两个条件都满足，找到对应编号的specialCheckbox2元素，替换类名；不满足时可选择还原类名

完整代码 #

jQuery(function($){
    $('.taskItemsDetails').each(function() {
        const $input = $(this);
        // 提取编号前缀和日期部分
        const idParts = $input.attr('id').split('_');
        const itemPrefix = idParts[0];
        const weekday = idParts[1];
        
        // 定位对应select元素
        const $targetSelect = $(`.actualTaskName#${itemPrefix}_Taskname`);
        // 获取选中项的分类属性
        const selectedCategory = $targetSelect.find(':selected').data('category');
        // 判断输入值是否大于0（转数字避免字符串比较错误）
        const inputVal = parseFloat($input.val());
        const meetsConditions = inputVal > 0 && selectedCategory === 'T';

        // 定位对应checkbox的父div（按示例规则替换前缀r为w）
        const checkboxId = `${itemPrefix.replace('r', 'w')}_${weekday}`;
        const $checkboxContainer = $(`div.specialCheckbox2:has(#${checkboxId})`);

        if (meetsConditions) {
            $checkboxContainer.removeClass('specialCheckbox2').addClass('specialCheckbox3');
        } else {
            // 可选：条件不满足时还原类名
            $checkboxContainer.removeClass('specialCheckbox3').addClass('specialCheckbox2');
        }
    });
});

注意事项 #

• 编号匹配逻辑基于示例结构（r前缀对应w前缀），如果实际DOM结构有差异，需调整checkboxId的生成规则
• 使用parseFloat处理input值，避免字符串类型导致的错误比较
• 如果input和目标div有明确的层级关联（比如在同一表格行/列），可以用closest()或siblings()等方法替代ID定位，提升代码健壮性

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