如何筛选带IsCheckedCurrently后缀的Checkbox并操作自定义属性？

需求背景 #

本人是.NET C#后端开发者，JavaScript经验有限。现有一批名称后缀为IsCheckedCurrently的Checkbox，需要遍历它们并操作其data-teamkeys自定义属性，同时忽略其他Checkbox。当前代码中需要修改$('input[type=checkbox]')这一行，加入名称筛选条件。示例Checkbox标签如下：

<input type="checkbox" name="FIELD_PREFIX_9.IsCheckedCurrently" id="AHREF_9" checked="checked" value="true" >

引入的jQuery版本为3.6.0。

当前代码：

$(document)
    .off("change", "#MyDropDown")
    .on("change", "#MyDropDown", function (e) {
        e.preventDefault();
        var teamKey = unescapeHtml($(this).val());

        $('input[type=checkbox]').each(function () {
            var teamKeys = $(this).attr('data-teamkeys');
            if (teamKeys != undefined) {
                if (teamKeys != "") {

                    var ischeckPreviouslyItem = $("[name='" + $(this).attr('name').replace("IsCheckedCurrently", "IsCheckedPreviously") + "']");
                    if (teamKeys.includes(teamKey)) {
                        if (!this.checked) {
                            this.checked = true;
                            this.enabled = true;
                            ischeckPreviouslyItem.prop("checked", true);
                        }
                    }
                    else {
                        if (this.checked) {
                            this.checked = false;
                            ischeckPreviouslyItem.prop("checked", false)
                        }
                    }
                }
            }
        });
    });

function unescapeHtml(safe) {
    return safe.replace(/&/g, '&')
        .replace(/</g, '<')
        .replace(/>/g, '>')
        .replace(/"/g, '"')
        .replace(/'/g, "'");
}

修改方案 #

将原选择器$('input[type=checkbox]')替换为jQuery的属性结尾选择器，精准匹配名称后缀为IsCheckedCurrently的Checkbox：

$('input[type=checkbox][name$="IsCheckedCurrently"]')

完整修改后的代码 #

$(document)
    .off("change", "#MyDropDown")
    .on("change", "#MyDropDown", function (e) {
        e.preventDefault();
        var teamKey = unescapeHtml($(this).val());

        // 修改后的筛选选择器
        $('input[type=checkbox][name$="IsCheckedCurrently"]').each(function () {
            var teamKeys = $(this).attr('data-teamkeys');
            // 合并判断逻辑简化代码
            if (teamKeys != undefined && teamKeys !== "") {

                var ischeckPreviouslyItem = $("[name='" + $(this).attr('name').replace("IsCheckedCurrently", "IsCheckedPreviously") + "']");
                if (teamKeys.includes(teamKey)) {
                    if (!this.checked) {
                        this.checked = true;
                        this.disabled = false; // 修正：原生DOM控制启用的属性是disabled，而非enabled
                        ischeckPreviouslyItem.prop("checked", true);
                    }
                } else {
                    if (this.checked) {
                        this.checked = false;
                        ischeckPreviouslyItem.prop("checked", false);
                    }
                }
            }
        });
    });

function unescapeHtml(safe) {
    return safe.replace(/&/g, '&')
        .replace(/</g, '<')
        .replace(/>/g, '>')
        .replace(/"/g, '"')
        .replace(/'/g, "'");
}

补充说明 #

• [name$="IsCheckedCurrently"]是jQuery的属性结尾匹配选择器，能直接过滤出名称以指定字符串结尾的元素，无需额外遍历判断，提升代码效率。
• 原代码中this.enabled = true是错误用法，原生DOM元素控制启用/禁用的属性为disabled，设置为false即启用元素。
• 合并了两层空值判断逻辑，简化代码结构的同时保持功能不变。

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