点击自定义滑动checkbox时修改其外层div边框颜色的实现方法

完全不需要引入JS交互，从Blazor的绑定逻辑出发即可解决动态列表ID重复问题，符合Blazor开发规范，性能更优。

步骤1：扩展角色实体类 #

给你的角色实体新增选中状态字段：

// 若你可以直接修改原Role类
public class AppRole
{
    // 原有字段（Description、CommonName等）保持不变
    public string Description { get; set; }
    public string CommonName { get; set; }
    // 新增选中状态字段
    public bool IsChecked { get; set; }
}

// 若原Role类不可修改，可封装一层ViewModel
public class AppRoleViewModel
{
    public AppRole Role { get; set; }
    public bool IsChecked { get; set; }
}

步骤2：修改页面渲染代码 #

在循环中绑定选中状态和父容器的类，完全不需要设置ID：

@if (AppRolesDetails != null)
{
    foreach (var role in AppRolesDetails)
    {
        <div class="float-container">
            <!-- 父容器类根据选中状态动态切换 -->
            <div class="@(role.IsChecked ? "float-child box-color-change" : "float-child")">
                <input type="checkbox" 
                       class="checkbox" 
                       @checked="role.IsChecked"
                       @onchange="eventArgs => { 
                           role.IsChecked = (bool)eventArgs.Value;
                           CheckboxClicked(role.Description, eventArgs.Value); 
                       }"/>
            </div>
            <div class="float-child">
                <p>Application Role - </p>
                <br />
                <p><b>@role.Description</b></p>
                <br/>
            </div>
        </div>
        AppOwnerCommonName = role.CommonName;
    }
}

如果你坚持使用JS实现，不需要给元素设置固定ID，通过DOM节点关系查找父容器即可，同时使用事件委托适配动态渲染的元素：

步骤1：删除所有元素的固定ID设置 #

不需要给float-child和checkbox加id属性，保持原有类名即可。

步骤2：修改JS代码如下 #

function BorderColorChangeOnCheckboxClick(){
    // 使用事件委托绑定，适配动态新增的元素
    $(document).on('click', '.checkbox', function () {
        // 查找当前点击的checkbox最近的父级.float-child元素
        const $parentFloat = $(this).closest('.float-child');
        if ($(this).is(":checked")) {
            $parentFloat.addClass('box-color-change');
        } else {
            $parentFloat.removeClass('box-color-change');
        }
    });
};

注：原有JS中重复设置的width、padding、text-align-last属性属于冗余代码，这些属性已经在float-child类中定义，只需要切换控制边框的box-color-change类即可，代码更简洁易维护。

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