admin管理员组

文章数量:1326523

I'm having a strange issue with asp enabled state of radiobutton.

Code in .aspx page :

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="testradioButton.WebForm1" %>
<!DOCTYPE html>
<html xmlns="">
<head runat="server">
    <title></title>
    <script type="text/javascript" src=".11.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#radYes').change(function () { gererEtat(); });
            $('#radNo').change(function () { gererEtat(); });
        });
        function gererEtat() {
            $('#radDisabledYes').prop('disabled', !$('#radYes').prop('checked'));
            $('#radDisabledNo').prop('disabled', !$('#radYes').prop('checked'));
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:radiobutton ID="radYes" runat="server" GroupName="test" Text="yes"></asp:radiobutton>
        <asp:radiobutton ID="radNo" runat="server" GroupName="test" Text="No"></asp:radiobutton>
    </div>
    <div>
        <asp:radiobutton ID="radDisabledYes" runat="server" GroupName="test2" Text="yes"></asp:radiobutton>
        <asp:radiobutton ID="radDisabledNo" runat="server" GroupName="test2" Text="No"></asp:radiobutton>
    </div>
    <asp:LinkButton ID="lnktoto" runat="server" Text="Submit"></asp:LinkButton>
    </form>
</body>
</html>

And Code Behind :

Public Class WebForm1
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        radDisabledYes.Enabled = radYes.Checked
        radDisabledNo.Enabled = radYes.Checked
    End If
    Stop
End Sub

Private Sub Radiobutton1_CheckedChanged(sender As Object, e As EventArgs) Handles radYes.CheckedChanged, radNo.CheckedChanged
    radDisabledYes.Enabled = radYes.Checked
    radDisabledNo.Enabled = radYes.Checked
End Sub

Private Sub lnktoto_Click(sender As Object, e As EventArgs) Handles lnktoto.Click
    Stop
End Sub
End Class

On server side, I disable radio buttons on first load. I have the same conditions in javascript. So on client side, if user click Yes, I enable some controls. I do the same on server side. It works great with all type of controls except Radio Button.

Let say that on load, I disable radio buttons. On client side, base on user input, I enable them (in javascript). User checked a radio button and submit page. On server side, the radio button is disabled and unchecked. I have code that check the conditions and enable it. But the radio button is still not checked. I understand why, the server ignore the checked state because at first, it think it is disabled. Is there a way to make this work? I know the server is receiving the checked state because when I check Request.Form, I see radDisable=Yes.

Thanks for your help.

I'm having a strange issue with asp enabled state of radiobutton.

Code in .aspx page :

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="testradioButton.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://code.jquery./jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#radYes').change(function () { gererEtat(); });
            $('#radNo').change(function () { gererEtat(); });
        });
        function gererEtat() {
            $('#radDisabledYes').prop('disabled', !$('#radYes').prop('checked'));
            $('#radDisabledNo').prop('disabled', !$('#radYes').prop('checked'));
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:radiobutton ID="radYes" runat="server" GroupName="test" Text="yes"></asp:radiobutton>
        <asp:radiobutton ID="radNo" runat="server" GroupName="test" Text="No"></asp:radiobutton>
    </div>
    <div>
        <asp:radiobutton ID="radDisabledYes" runat="server" GroupName="test2" Text="yes"></asp:radiobutton>
        <asp:radiobutton ID="radDisabledNo" runat="server" GroupName="test2" Text="No"></asp:radiobutton>
    </div>
    <asp:LinkButton ID="lnktoto" runat="server" Text="Submit"></asp:LinkButton>
    </form>
</body>
</html>

And Code Behind :

Public Class WebForm1
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        radDisabledYes.Enabled = radYes.Checked
        radDisabledNo.Enabled = radYes.Checked
    End If
    Stop
End Sub

Private Sub Radiobutton1_CheckedChanged(sender As Object, e As EventArgs) Handles radYes.CheckedChanged, radNo.CheckedChanged
    radDisabledYes.Enabled = radYes.Checked
    radDisabledNo.Enabled = radYes.Checked
End Sub

Private Sub lnktoto_Click(sender As Object, e As EventArgs) Handles lnktoto.Click
    Stop
End Sub
End Class

On server side, I disable radio buttons on first load. I have the same conditions in javascript. So on client side, if user click Yes, I enable some controls. I do the same on server side. It works great with all type of controls except Radio Button.

Let say that on load, I disable radio buttons. On client side, base on user input, I enable them (in javascript). User checked a radio button and submit page. On server side, the radio button is disabled and unchecked. I have code that check the conditions and enable it. But the radio button is still not checked. I understand why, the server ignore the checked state because at first, it think it is disabled. Is there a way to make this work? I know the server is receiving the checked state because when I check Request.Form, I see radDisable=Yes.

Thanks for your help.

Share Improve this question edited Aug 20, 2014 at 13:49 Mathieu G asked Jun 26, 2014 at 18:59 Mathieu GMathieu G 3957 silver badges19 bronze badges 5
  • jsfiddle provided shows that you are not using asp radio button. It is simple html input control. How are you accessing it on server? Have you used runat="server" attribute in your html? – ataurrehman Commented Aug 18, 2014 at 9:43
  • I can't put asp code in jsfiddle (or can I?). I am using asp Radio Button. – Mathieu G Commented Aug 18, 2014 at 12:54
  • of course you can't. Asked for confirmation. try disabling viewstate for those radio buttons and do the same. Don't disable viewsate for whole page . Just disable radio button view state. – ataurrehman Commented Aug 18, 2014 at 13:38
  • please post full code instead of a link to jsfiddle which doesn't have your code as it can't contain asp radio buttons (and that might be broken in the future). – Daniël Tulp Commented Aug 20, 2014 at 10:19
  • Here's ths full code! – Mathieu G Commented Aug 20, 2014 at 13:49
Add a ment  | 

6 Answers 6

Reset to default 1

Here is the hack you are looking for :)

Public Class WebForm1
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If radYes.Checked Then
        radDisabledYes.InputAttributes.Remove("disabled")
        radDisabledNo.InputAttributes.Remove("disabled")
    Else
        radDisabledYes.InputAttributes("disabled") = "disabled"
        radDisabledNo.InputAttributes("disabled") = "disabled"
    End If
    Stop
End Sub

Private Sub Radiobutton1_CheckedChanged(sender As Object, e As EventArgs) Handles radYes.CheckedChanged, radNo.CheckedChanged
    ' not really needed anymore, but lets leave it in here for fun!
End Sub

Private Sub lnktoto_Click(sender As Object, e As EventArgs) Handles lnktoto.Click
    Stop
End Sub
End Class

This essentially bypasses .NET's safety check regarding disabled controls. The controls are still enabled/disabled appropriately, but you are doing so without messing with the WebControl.Enabled property.

$(document).ready(function () {
  $('#<%=radYes.ClientID%>').change(function () { gererEtat(); });
  $('#<%=radNo.ClientID%>').change(function () { gererEtat(); });
  function gererEtat() {
    $('#<%=radDisabledYes.ClientID%>').prop('disabled', !$('#<%= radYes.ClientID%>').prop('checked'));
    $('#<%=radDisabledNo.ClientID%>').prop('disabled', !$('#<%=radYes.ClientID%>').prop('checked'));
  }
});

Use 'ClientID' for your control selection in jquery code because control is server control.

ASP.NET can be really paranoid (and rightfully so) about posting back initially disabled controls. So instead of actually disabling them - simulate the effect. E.g. set attribute onfocus = "this.blur()" - this will prevent clicking the button. And when you need to enable the button - remove the attribute.

It seems to me that your code behavior is acceptable until the server is unable to identify state changes of radio buttons that it assumes are disabled.

Why not just keep a hidden and disabled radio buttonset in the background? When you want the disabled look, unhide that set and hide the real ones with JavaScript. Then you never encounter a problem with disabled forms going to the server.

Edit: Upon looking at your question again, I wonder about the need to disable anything on the server side to begin with. Maybe there is a security risk I am not aware of. An alternate choice might be to leave the buttonset enabled serverside and disable with javascript upon document load.

I have one solution its little bit trickey but it can help you out

<script type="text/javascript">
    $(document).ready(function () {
        $('#radYes').change(function () { gererEtat(); });
        $('#radNo').change(function () { gererEtat(); });

        // restore radio button disable status on document ready 
        var status = $("#txtradioStatus").val() == "true" ? true : false;
        $('#radDisabledYes').prop('disabled', !status);
        $('#radDisabledNo').prop('disabled', !status);

    });
    function gererEtat() {
        $('#radDisabledYes').prop('disabled', !$('#radYes').prop('checked'));
        $('#radDisabledNo').prop('disabled', !$('#radYes').prop('checked'));
        // store radio button status in hidden field
        $("#txtradioStatus").val($('#radYes').prop('checked'));
    }

</script>



<div>
    <asp:radiobutton ID="radYes" runat="server" GroupName="test" Text="yes"></asp:radiobutton>
    <asp:radiobutton ID="radNo" runat="server" GroupName="test" Text="No"></asp:radiobutton>
</div>
<div>
    <asp:radiobutton ID="radDisabledYes" runat="server" GroupName="test2" Text="yes"></asp:radiobutton>
    <%-- take hidden field that you can keep status of radio button after postback--%>
    <input type="hidden" runat="server" value="true" id="txtradioStatus" />
    <asp:radiobutton ID="radDisabledNo" runat="server" GroupName="test2" Text="No"></asp:radiobutton>
</div>
<asp:LinkButton ID="lnktoto" runat="server" Text="Submit"></asp:LinkButton>

submitdisabledcontrols="true" this will solve your problem. Follow the steps given below.

Reason is, you have disabled the control from the server side, even if you enabled it from client using JQuery, SERVER DOES NOT KNOW ABOUT IT. Therefore it keeps the same value as it is not expecting to change the value of a disabled control.

There are two things to do.

First remove page load code.(Also Radiobutton1_CheckedChanged event not required)

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    'If Not IsPostBack Then
    '    radDisabledYes.Enabled = radYes.Checked
    '    radDisabledNo.Enabled = radYes.Checked
    'End If
End Sub

Then change client side code to

 <script type="text/javascript">
    $(document).ready(function () {

        $('#radYes').change(function () { gererEtat(!$('#radYes').prop('checked')); });
        $('#radNo').change(function () { gererEtat(!$('#radYes').prop('checked')); });
        if (!$('#radYes').prop('checked')) {
            gererEtat(true);
        }
    });
    function gererEtat(isEnable) {
        $('#radDisabledYes').prop('disabled', isEnable);
        $('#radDisabledNo').prop('disabled', isEnable);
    }
</script>

finally in the form element add the submitdisabledcontrols="true" attribute.

<form id="form1" runat="server"  submitdisabledcontrols="true" >

run and test the code it will work.

本文标签: javascriptaspnet server side disabled Radiobutton enabled on client sideStack Overflow