Question

我在启用asp.net的radiobutton状态时遇到了一个奇怪的问题。

.aspx页面中的代码：

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="testradioButton.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/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>

代码背后：

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

在服务器端，我在第一次加载时禁用单选按钮。我在javascript中有相同的条件。所以在客户端，如果用户单击是，我启用一些控件。我在服务器端做同样的事情。除了Radio Button之外，它适用于所有类型的控件。

假设在加载时，我禁用单选按钮。在客户端，基于用户输入，我启用它们（在javascript中）。用户选中了一个单选按钮并提交了页面。在服务器端，单选按钮被禁用并取消选中。我有代码检查条件并启用它。但仍未检查单选按钮。我理解为什么，服务器忽略已检查状态，因为一开始它认为它被禁用。有没有办法让这项工作？我知道服务器正在接收检查状态，因为当我检查Request.Form时，我看到radDisable = Yes。

感谢您的帮助。

Answer 1

以下是您正在寻找的黑客：）

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

这基本上绕过了.NET关于禁用控件的安全检查。控件仍然可以正确启用/禁用，但您这样做却没有弄乱WebControl.Enabled属性。

Answer 2

$(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'));
  }
});

使用＆＃39; ClientID＆＃39; 在jquery代码中进行控件选择，因为控件是服务器控件。

Answer 3

对于发布最初禁用的控件，ASP.NET可能真的很偏执（并且理所当然）。因此，而不是实际禁用它们 - 模拟效果。例如。设置属性onfocus = "this.blur()" - 这将阻止单击按钮。当您需要启用按钮时 - 删除属性。

Answer 4

在我看来，在服务器无法识别它假定禁用的单选按钮的状态更改之前，您的代码行为是可接受的。

为什么不在后台保留隐藏和禁用的单选按钮？当您想要禁用外观时，取消隐藏该设置并使用JavaScript隐藏真实的内容。然后，您永远不会遇到禁用表单进入服务器的问题。

编辑：在再次查看您的问题时，我想知道是否需要在服务器端禁用任何内容。也许存在我不知道的安全风险。另一种选择可能是在启用按钮组的服务器端，并在文档加载时使用javascript禁用。

Answer 5

我有一个解决方案它有点trickey但它可以帮助你

<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>

Answer 6

submitdisabledcontrols =＆＃34; true＆＃34; 这将解决您的问题。请按照以下步骤进行操作。

原因是，您已经从服务器端禁用了控件，即使您使用JQuery从客户端启用它，服务器也不知道它。因此，它保持相同的值，因为它不希望更改禁用控件的值。

有两件事要做。

首先删除页面加载代码。（不需要Radiobutton1_CheckedChanged事件）

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

然后将客户端代码更改为

 <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>

最后在表单元素中添加submitdisabledcontrols =＆＃34; true＆＃34;属性。

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

运行并测试它将起作用的代码。

asp.net服务器端禁用在客户端启用Radiobutton

6 个答案: