简体   繁体   English

asp.net中的javascript

[英]javascript in asp.net

<asp:RadioButtonList ID="RdoBtnHasNotified" runat="server" RepeatDirection="Horizontal" AutoPostBack="True" OnSelectedIndexChanged="RdoBtnHasNotified_SelectedIndexChanged">
    <asp:ListItem Value="1">Yes</asp:ListItem>
    <asp:ListItem Value="0" Selected="True">No</asp:ListItem>
</asp:RadioButtonList>


<asp:TextBox ID="TxtHowNotified" runat="server" TextMode="MultiLine" MaxLength="100"></asp:TextBox>

I want to enable the TextBox by clicking on the RadioButtonList , without using autopostback=true . 我想通过单击RadioButtonList来启用TextBox ,而不使用autopostback=true How can I do this with JavaScript? 我怎么能用JavaScript做到这一点?

You can use jQuery to manipulate input's enabled state (HTML translation for TextBox) or you can use ASP.NET Ajax so you can set both controls inside of update panel in this case you won't see page being reloaded on postback which must happen in order for you to change status of TextBox on some other event. 您可以使用jQuery来操作输入的启用状态(TextBox的HTML转换),或者您可以使用ASP.NET Ajax,这样您就可以在更新面板中设置两个控件,在这种情况下,您将看不到页面在回发时重新加载,这必须在命令您在其他某些事件上更改TextBox的状态。 Tbh i would go with ASP.NET Ajax because my experience shows that jQuery does not work that well with ASP.NET controls when it comes to complex stuff ie. 我会选择使用ASP.NET Ajax,因为我的经验表明,当涉及到复杂的东西时,jQuery对ASP.NET控件的效果不佳。 ASP.NET uses javascript for event activation which can cause either jQuery or ASP.NET not to work as you may expected. ASP.NET使用javascript进行事件激活,这可能导致jQuery或ASP.NET无法正常工作。

Good luck with update panels... 祝更新面板好运......

Using jQuery, you can have a fairly custom result by hooking in to the changes on the radio buttons... 使用jQuery,您可以通过挂接单选按钮上的更改来获得相当自定义的结果...


$("#<%= RdoBtnHasNotified.ClientID %> > input[type=radio]").change(function(){
  // this function is called whenever one of the radio button list's control's change
  // the $(this) variable refers to the input control that triggered the event
  var txt = $("#<%= TxtHowNotified.ClientID %>");
  if($(this).val()=="1") {
    txt.removeAttr("disabled");
  } else {
    txt.attr("disabled", true);
  }
});

Each ListItem renders a radio button with the same name parameter; 每个ListItem呈现一个具有相同名称参数的单选按钮; I would suggest running the app and looking at the generated source to get an idea of what you need to do to listen for the radio button events. 我建议运行应用程序并查看生成的源,以了解您需要做什么来监听单选按钮事件。 Essentially the ID of the radio button list is the name parameter, so you can get the group of radio buttons as (using JQuery): 本质上,单选按钮列表的ID是name参数,因此您可以将单选按钮组(使用JQuery):

$("input[name='<%= rbl.ClientID%>']").click(function() {
   var tb = $("#textboxid");
   //do something here; this points to the radio button
});

HTH. HTH。

Here you go: 干得好:

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void RdoBtnHasNotified_PreRender(object sender, EventArgs e)
    {
        foreach (ListItem item in RdoBtnHasNotified.Items)
            item.Attributes.Add("onclick", string.Format("toggleTextBox(this,'{0}');", TxtHowNotified.ClientID));
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">
        function toggleTextBox(radioButton, textBoxId) {
            document.getElementById(textBoxId).disabled = radioButton.value != "1";
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:RadioButtonList ID="RdoBtnHasNotified" OnPreRender="RdoBtnHasNotified_PreRender"
            runat="server" RepeatDirection="Horizontal">
            <asp:ListItem Value="1">Yes</asp:ListItem>
            <asp:ListItem Value="0" Selected="True">No</asp:ListItem>
        </asp:RadioButtonList>
        <asp:TextBox ID="TxtHowNotified" runat="server" TextMode="MultiLine" MaxLength="100" Enabled="false"></asp:TextBox>
    </div>
    </form>
</body>
</html>

Write the code in the following way 以下列方式编写代码

<script type="text/javascript">
    $(document).ready(function() {
        $("input[name='RdoBtnHasNotified']").change(function() {
        $("input[name='RdoBtnHasNotified']:checked").val() == '1' ? $('#TxtHowNotified').removeAttr("disabled")  : $('#TxtHowNotified').attr('disabled', 'true'); 

        });
    });

</script>

and also disable the textbox (Enabled="false") since initialy the value of the "RdoBtnHasNotified" is "No". 并且还禁用文本框(Enabled =“false”),因为最初“RdoBtnHasNotified”的值为“No”。

$('#<%= RdoBtnHasNotified.ClientID %> > input[type=radio]').click(function()
{
  var txtbox = $('#<%= TxtHowNotified.ClientID %>');
  if($(this).val() == '1')
  {
     document.getElementById('#<%= TxtHowNotified.ClientID %>').disabled = false;
  }
  else
  {
     document.getElementById('#<%= TxtHowNotified.ClientID %>').disabled = true;
  }
});

I think using change event will not fire in IE. 我认为使用更改事件不会在IE中触发。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM