我面临一些问题，在c＃中使用jquery隐藏和显示文本框。程序没有显示任何错误但是当我点击单选按钮文本框时没有隐藏。这是我的源代码。请帮我解决这个问题。我是jquery的新手。
<%@ Page Title="" Language="C#" MasterPageFile="~/Home.Master" AutoEventWireup="true" CodeBehind="ExperienceADD.aspx.cs" Inherits="Manjilas.WebForm31"%>
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<head>
<script src="Scripts2/jquery-1.7-vsdoc.js"></script>
<script src="Scripts2/jquery-1.7.js"></script>
<script src="Scripts2/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function () {
$('input[name="type"]').on('click', function () {
if ($(this).val() == 'Experienced') {
$('#txtcomp').Show();
$('#txtfrom').Show();
$('#txtto').Show();
} else {
$('#txtcomp').hide();
$('#txtcomp').hide();
$('#txtfrom').hide();
$('#txtto').hide();
}
});
</script>
</head>
<div class="container-fluid">
<div class="row-fluid">
<div class="well span5 center login-box">
<div class="alert alert-info">
<b><font size="4">ADD EXPERIENCE DETAILS</font></b>
</div>
<form id="form1" runat="server">
<asp:UpdatePanel ID="updatepanel1" runat="server"><ContentTemplate>
<div>
<ajaxToolkit:ToolkitScriptManager runat="server">
</ajaxToolkit:ToolkitScriptManager>
<asp:UpdatePanel ID="updatepanel2" runat="server"></asp:UpdatePanel>
<fieldset>
<table class="ui-accordion">
<tr>
<td align="left" class="style2">
</td>
<td align="left">
<input type="radio" name="type" value="Fresher" />Fresher
<input type="radio" name="type" value="Experienced" />Experienced
</td>
</tr>
<tr>
<td align="left" class="style2">
Company</td>
<td align="left">
<div class="input-prepend" title="Autogenerated District ID" data-rel="tooltip">
<asp:TextBox ID="txtcomp" runat="server" TextMode="SingleLine"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left" class="style2">
From Date</td>
<td align="left">
<div class="input-prepend" title="Enter District Name" data-rel="tooltip">
<asp:TextBox ID="txtfrom" runat="server" TextMode="SingleLine"></asp:TextBox>
<ajax:CalendarExtender ID="Calendarextender1" TargetControlID ="txtfrom" Format="dd/MM/yyyy" runat="server"></ajax:CalendarExtender>
</td>
</tr>
<tr>
<td align="left" class="style2">
To Date</td>
<td align="left">
<div class="input-prepend" title="Enter District Name" data-rel="tooltip">
<asp:TextBox ID="txtto" runat="server" TextMode="SingleLine"></asp:TextBox>
<ajax:CalendarExtender ID="Calendarextender2" TargetControlID ="txtto" Format="dd/MM/yyyy" runat="server"></ajax:CalendarExtender>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td align="left">
<asp:Button ID="Button1" class="btn-primary" runat="server" Text="Add"
Height="36px" Width="74px" onclick="Button1_Click" />
<asp:Button ID="Button2" class="btn-primary" runat="server" Text="Cancel"
Height="36px" Width="74px" PostBackUrl="~/districtDetails.aspx" />
</td>
</tr>
<tr>
<td class="style2">
</td>
<td align="left">
<asp:Label ID="Label2" runat="server" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</form>
</div><!--/span-->
</div><!--/row-->
</div>
</div>
</asp:Content>
答案 0 :(得分：0)
您可以执行以下操作： -
$('#<%= txtcomp.ClientID %>').hide();
在这里给出更详细的答案Accessing Asp.net controls using jquery (all options)
在页面上呈现时，上面的aspx代码更改为
<input type="text" id="ctl00_Main_txtcomp'" name="ctl00$Main$mtxtcomp'" />
这是因为.net控件所在的主控制信息和控制信息前置，这使我们编写选择器变得有点棘手。
您有几个选择。这绝不是全面的，但我会试一试。
<强>选项1：
$('#<%= txtcomp.ClientID %>')
使用ClientID - 推荐但是meh ..不是那么多。如果可以的话，我会尽量避免编写ClientID。主要原因是，您只能在.aspx页面中使用它，而不能在外部.js文件中使用它。
<强>选项2：
$('[id$=txtcomp]') // id which ends with the text 'txtcomp'
$('[id*=txtcomp]') // id which contains the text 'txtcomp'
<强>选项3：
使用CssClass - 强烈推荐。因为使用类的选择器是干净且简单的。
如果您想知道，.net控件的CssClass与传统html控件的类相同。
<asp:TextBox runat="server" ID="txtcomp" CssClass="myclass" /> //add CssClass
$('.myclass') //selector
<强>选项4：
在控件上使用在.NET Framework 4.0中引入的ClientIDMode =＆＃34; Static＆＃34;以便它的ID保持不变。 - 也推荐。
<asp:TextBox runat="server" ID="txtcomp" ClientIDMode="Static" /> //add ClientIDMode
$('#txtcomp') //use the normal ID selector
答案 1 :(得分：0)
这可能会有所帮助.......
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<select id="select" height="30px" style="width: 90px">
<option>--select - </option>
<option value="1">1</option>
<option value="3">3</option>
</select>
<input type=”text” class=”1″ />
<input type=”text” class=”1″ />
<input type=”text” class=”2″ />
<input type=”text” class=”2″ />
<input type=”text” class=”2″ />
<input type=”text” class=”2″ />
<script>
$(document).ready(function(){
$(“.1″).hide();$(“.2″).hide();
});
$(“#select”).change(function(){
var val = $(this).val();
if(val==1){$(“.1″).show();
$(“.2″).hide();
}
else if(val==3){
$(“.1″).show();
$(“.2″).show();
}
else{
$(“.1″).hide();$(“.2″).hide();
}
});
</script>
答案 2 :(得分：0)
这一定会帮到你......
<html>
<head>
<script type="text/javascript">
$(document).ready(function () {
$('#enable').click(function () {
$('#textBox').removeAttr("disabled")
});
$('#disable').click(function () {
$('#textBox').attr("disabled", "disabled");
});
});
</script>
</head>
<body>
<input type="text" id="textBox" />
<button id="enable">Enable</button>
<button id="disable">Disable</button>
</body>
</html>
答案 3 :(得分：0)
请检查一下......
的Javascript
$(document).ready(function () {
$(".text").hide();
$("#r1").click(function () {
$(".text").show();
});
$("#r2").click(function () {
$(".text").hide();
});
});
HTML
<p>Show textboxes
<input type="radio" name="radio1" id="r1" value="Show">Do nothing
<input type="radio" name="radio1" id="r2" value="Nothing">
</p>Wonderful textboxes:
<div class="text">
<p>Textbox #1
<input type="text" name="text1" id="text1" maxlength="30">
</p>
</div>
<div class="text">
<p>Textbox #2
<input type="text" name="text2" id="text2" maxlength="30">
</p>
</div>