---
title : 使用JS避免ListView中RadioButton整頁刷新
tags: ListView、JS、RadioButton
creat-date: 2022-03-16
update_date : 2022-03-16
---

---
# 使用JS避免ListView中RadioButton整頁刷新
---

## 一、需求說明

**啟用：「授權角色設定」可選擇。
停用：「授權角色設定」不可選擇，還原預設角色。
選擇後畫面要停留在原本的選項上。**


## 一、程式範例
前端 Listview

<asp:ListView ID="lvUserRolData" DataKeyNames="FunItemId" EnableViewState="true" OnItemDataBound="lvUserRolData_ItemDataBound" runat="server" > 
    <GroupTemplate>
        <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
    </GroupTemplate>
    <LayoutTemplate>
        <table class="table_list table-rwd mainTable">
            <thead>
                <tr>
                    <th class="center" style="width:3%">項次</th>
                    <th class="center" style="width:15%;">功能模組</th>
                    <th class="center" style="width:12%;">功能名稱</th>
                    <th class="center" style="width:5%;">管理</th>
                    <th class="center" style="width:45%;">授權角色</th>
                    <th class="center" style="width:15%;">功能說明</th>
                    <th class="center" style="width:5%;">啟用/停用</th>
                    <th class="center" style="width:5%;">授權角色設定</th>
                </tr>                        
            </thead>
            <tbody>
                <asp:PlaceHolder ID="groupPlaceholder" runat="server" />   
            </tbody>
        </table>                    
    </LayoutTemplate>
    <ItemTemplate>
        <tr>
            <td data-th="項次" class="center"><%# HttpUtility.HtmlEncode(Eval("FlowNo")) %></td>
            <td data-th="功能模組" class="left"><%# HttpUtility.HtmlEncode(Eval("FunItem")) %></td>
            <td data-th="功能名稱" class="left"><%# HttpUtility.HtmlEncode(Eval("FunItemName")) %></td>
            <td data-th="管理" class="center"><%# HttpUtility.HtmlEncode(Eval("FunItem_Manage")) %></td>
            <td data-th="授權角色" class="center">
                <asp:HiddenField ID="hdfFunItemId" Value='<%# HttpUtility.HtmlEncode(Eval("FunItemId")) %>' runat="server" />
                <asp:CheckBoxList ID="cblListRol" Enabled="false" RepeatDirection="Horizontal" RepeatColumns="4" runat="server"></asp:CheckBoxList>
            </td>
            <td data-th="功能說明" class="left"><%# HttpUtility.HtmlEncode(Eval("FunDes")) %></td>
            <td data-th="啟用/停用" class="center">
                <asp:HiddenField ID="hdfFunSetting" Value='<%# HttpUtility.HtmlEncode(Eval("FunSetting")) %>' runat="server" />   
                <asp:RadioButton ID="rdbFSY" Text="啟用" ClientIDMode="Static" GroupName="FunSetting" ForeColor="Blue" runat="server" />
                <asp:RadioButton ID="rdbFSN" Text="停用" ClientIDMode="Static" GroupName="FunSetting" ForeColor="Red" runat="server" />
            </td>
            <td data-th="授權角色設定" class="center">
                <asp:HiddenField ID="hdfIsChangeRole" Value='<%# HttpUtility.HtmlEncode(Eval("IsChangeRole")) %>' runat="server" />
                <asp:HiddenField ID="hdfNewRolId" Value='<%# HttpUtility.HtmlEncode(Eval("NewRolId")) %>' runat="server" />
                <asp:DropDownList ID="ddlRol" runat="server"></asp:DropDownList>
            </td>
        </tr>                                
    </ItemTemplate>
    <EmptyDataTemplate>
        <table class="table_form table-rwd">
            <thead>
                <tr>
                    <th class="center" style="width:3%">項次</th>
                    <th class="center" style="width:15%;">功能模組</th>
                    <th class="center" style="width:12%;">功能名稱</th>
                    <th class="center" style="width:5%;">管理</th>
                    <th class="center" style="width:45%;">授權角色</th>
                    <th class="center" style="width:15%;">功能說明</th>
                    <th class="center" style="width:5%;">啟用/停用</th>
                </tr>
                <tr>
                    <td colspan="7" style="text-align:center;font-family:'微軟正黑體';font-size:larger;">查無資料</td>
                </tr>
            </thead>                    
        </table>                     
    </EmptyDataTemplate>
</asp:ListView>

後端給定ListView的值，並設定RadioButton(啟用/停用)的onclick事件

protected void DefindData()
{        
    GisTable gtFIUR = SpowFunctionHelper.QueryFunItemUsrRol(sRolId, sPkCn);
    if (gtFIUR.Rows.Count > 0) {
        lvUserRolData.DataSource = gtFIUR;
        lvUserRolData.DataBind();                    
        for (int i = 0; i < lvUserRolData.Items.Count; i++) {                        
            RadioButton rbY = (RadioButton)lvUserRolData.Items[i].FindControl("rdbFSY");
            RadioButton rbN = (RadioButton)lvUserRolData.Items[i].FindControl("rdbFSN");
            rbY.Attributes.Add("onclick", "showSelRol(" + i.ToString() + ")");                        
            rbN.Attributes.Add("onclick", "hideSelRol(" + i.ToString() + ")");
        }
    }
}

檢視程式原始碼確認「啟用/停用」的ID

<script type="text/javascript">  
    function showSelRol(divid) {
        // 啟用：顯示「授權角色設定」
        var CtrId = "ContentPlaceHolder1_lvUserRolData_ctrl" + divid + "_ddlRol_" + divid
        document.getElementById(CtrId).disabled = false;
    }

    function hideSelRol(divid) {
        // 停用：隱藏「授權角色設定」
        var CtrId = "ContentPlaceHolder1_lvUserRolData_ctrl" + divid + "_ddlRol_" + divid
        var objSelect = document.getElementById(CtrId);
        var oriRolName = document.getElementById("<%= hdfRolName.ClientID %>").value;
        objSelect.disabled = true;

        for (var i = 0; i < objSelect.options.length; i++) {
            if (objSelect.options[i].text == oriRolName) {
                objSelect.options[i].selected = true;
                return;
            }
        }                        
    }
</script>