Backend-Api/ServiceHost/Areas/Admin/Pages/Accounts/Account/Edit.cshtml

@model AccountManagement.Application.Contracts.Account.EditAccount
@{
    <style>
		/* Toggle Switch */
		.switch {
			position: relative;
			display: inline-block;
			width: 46px;
			height: 24px;
		}

			.switch input {
				opacity: 0;
				width: 0;
				height: 0;
			}

		.slider {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ccc;
			transition: .3s;
			border-radius: 34px;
		}

			.slider:before {
				position: absolute;
				content: "";
				height: 18px;
				width: 18px;
				left: 3px;
				bottom: 3px;
				background-color: white;
				transition: .3s;
				border-radius: 50%;
			}

		input:checked + .slider {
			background-color: #28a745; /* رنگ سبز مشابه Bootstrap */
		}

			input:checked + .slider:before {
				transform: translateX(22px);
			}

		select.form-control[multiple] {
			height: auto !important;
			padding: .375rem .75rem !important;
		}


    </style>

    string disable = "disabled=\"disabled\"";

}

<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	<h4 class="modal-title">ویرایش کاربر </h4>
</div>
<form asp-page="./Index" asp-page-handler="Edit"
      method="post"
      data-ajax="true"
      data-callback=""
      data-action="Refresh"
      enctype="multipart/form-data">
    <div class="modal-body">
        <div class="row">

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label asp-for="Fullname" class="control-label">نام</label>
                        <input type="text" class="form-control" asp-for="Fullname">
                        <span asp-validation-for="Fullname" class="error"></span>
                        @*@if (TempData["name"] != null)
                        {<br /><span class="error">@TempData["name"]</span>}*@

                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label asp-for="Username" class="control-label">نام کاربری</label>
                        <input type="text" class="form-control" asp-for="Username">
                        <span asp-validation-for="Username" class="error"></span>
                        @*@if (TempData["family"] != null)
                        {<br /><span class="error">@TempData["family"]</span>}*@
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label asp-for="RoleId" class="control-label">نقش </label>
                        <select class="form-control" asp-for="RoleId" asp-items='new SelectList(Model.Roles, "Id", "Name")'>
                            <option value="0"></option>
                        </select>

                        <span asp-validation-for="RoleId" class="error"></span>

                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label asp-for="Mobile" class="control-label">شماره تماس</label>
                        <input type="text" class="form-control" asp-for="Mobile">
                        <span asp-validation-for="Mobile" class="error"></span>


                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label asp-for="ProfilePhoto" class="control-label"> عکس پروفایل</label>
                        <input type="file" class="form-control" asp-for="ProfilePhoto" accept="image/*">
                        <span asp-validation-for="ProfilePhoto" class="error"></span>
                    </div>
                </div>

            </div>

            <div class="row">

                <div class="col-md-6">
                    <div class="row"></div>
                    <div class="form-group" style="margin: 29px 7px 0px;">
                        <span> فعالیت کاربر درمدیریت پروژه </span>
                        <span>&nbsp;</span>
                        <label class="switch">
                            <input id="editcheckAll" asp-for="IsProgramManagerUser" type="checkbox"/>
                            <span class="slider round"></span>
                        </label>
                    </div>



                </div>
				
                <div class="col-md-6">
                    <div class="form-group">

                        <label asp-for="UserRoles"> انتخاب نقش در مدیریت پروژه </label>
                        @if (Model.IsProgramManagerUser)
                        {
                            <select class="form-control select-city editSelect" multiple="multiple" asp-for="UserRoles" asp-items="Model.RoleList">
                                <option value="0"></option>
                            </select>
                        }
                        else
                        {
                            <select disabled="disabled" class="form-control select-city editSelect" multiple="multiple" asp-for="UserRoles" asp-items="Model.RoleList">
                                <option value="0"></option>
                            </select>
                        }
						

                        <span asp-validation-for="UserRoles" class="error"></span>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <input type="hidden" asp-for="Id" value="@Model.Id"/>
    
    <div id="edithiddenRoleIds"></div>
    <div class="modal-footer">

        <button type="submit" class="btn btn-success btn-rounded waves-effect waves-light m-b-5"> ثبت تغییرات </button>
        <button type="button" class="btn btn-default btn-rounded waves-effect waves-light m-b-5" data-dismiss="modal">بستن فرم</button>
    </div>
</form>

<script>

    $(document).ready(function () {

        $("#editcheckAll").change(function () {
           var userRole= @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.UserRoles));

    
       

               $("#edithiddenRoleIds").empty();

               if ($(this).is(":checked")) {
                  
                   $(".editSelect").removeAttr("disabled");
              
               } else {
                   
                  userRole.forEach(record => {
        
                        $("#edithiddenRoleIds").append(
                            `<input type="hidden" name="UserRoles" value="${record}" />`
                        );
                    });

                  
              
                   $(".editSelect").attr("disabled", "disabled");
               }
              
        });
              

    });

</script>