动态禁用jQuery Datepicker图标 [英] Dynamically disable jQuery Datepicker Icon
问题描述
有两件事我有兴趣知道：
- 如何从代码隐藏动态更改日期戳的禁用状态，以便在回发时触发？
-
是否可以使其被禁用状态取决于它附加到的文本框？ （即如果
< asp：TextBox Id =txtMyTextBoxEnabled =false>p>
然后datepicker也被禁用。
这是代码我一直在使用datepicker。
< script type =text / javascript>
$（function（）{
$（* [id $ ='txtMyTextBox']）。datepicker（{
changeMonth：true，
changeYear：true，
showOn： 'button'，
buttonImage：'/images/icon-calendar.gif'，
buttonImageOnly：true
}）;
}）;
< / script> ;
如果您使用jquery UI datepicker为什么不使用内置的禁用命令？所以在发布回来你只是禁用它。
当然，文本框也将被禁用，但我假设这是你想要的。
// jquery ui有一个内置的i con自动显示
http://jqueryui.com/demos/datepicker/#图标触发器
//如何禁用jquery ui。
http://jqueryui.com/demos/datepicker/#method-disable
以下是如何在发布回发后禁用该框。我不清楚你是否希望在文本框中输入内容后才能发生。
Default.aspx
<％@ Page Language =C＃AutoEventWireup =trueCodeFile =Default.aspx.csInherits =_ Default％>
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional。 dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
< head runat =server>
< title>< / title>
< link href =ui.all.css =stylesheettype =text / css/>
< link href =ui.core.css =stylesheettype =text / css/>
< link href =ui.datepicker.css =stylesheettype =text / css/>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js>< / script>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js>< /脚本>
< script type =text / javascript>
$（function（）
{
$（＃txtMyTextBox）。datepicker（{showOn：'button'，buttonImage：'images / calendar.gif'，buttonImageOnly ：true}）;
var disabled = $（'＃txtMyTextBox'）。attr（'disabled'）;
if（disabled == true）
{
$（ #txtMyTextBox）。datepicker（'disable'）;
}
else
{
$（＃txtMyTextBox）。datepicker（'enable'）;
}
}）;
< / script>
< / head>
< body>
< form id =form1runat =server>
< div>
< asp：TextBox ID =txtMyTextBoxrunat =serverEnabled =false>< / asp：TextBox>
< asp：Button ID =enablerunat =serverText =enableonclick =enable_Click
style =width：56px/>
< asp：Button ID =disablerunat =serverText =disable
onclick =disable_Click/>
< / div>
< / form>
< / body>
< / html>
代码背后
code> using System;
使用System.Collections.Generic;
使用System.Linq;
使用System.Web;
使用System.Web.UI;
使用System.Web.UI.WebControls;
public partial class _Default：System.Web.UI.Page
{
protected void enable_Click（object sender，EventArgs e）
{
txtMyTextBox.Enabled = true;
}
protected void disable_Click（object sender，EventArgs e）
{
txtMyTextBox.Enabled = false;
}
}
I'm fairly new to jQuery and I've been looking for a decent free datepicker for a while now. I am quite satisfied with jQuery UI's datepicker but I've hit a snag. The project where I'm using this requires that I have an icon beside the textbox. While this is fairly easy, I don't know how to dynamically disable the icon.
There are two things I'm interested in knowing:
- How can I dynamically change the disabled status of the datepicker from code-behind so that it triggers on postback?
Is it possible to make it's disabled status dependent on the textbox that it is attached to? (i.e. if
<asp:TextBox Id="txtMyTextBox" Enabled="false">
then datepicker gets disabled as well.
This is the code I've been using for the datepicker.
<script type="text/javascript">
$(function() {
$("*[id$='txtMyTextBox']").datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/images/icon-calendar.gif',
buttonImageOnly: true
});
});
</script>
Well if your using the jquery U.I datepicker why not use the built in disable command? So on post back you just disable it.
Of course the textbox will be disabled as well but I am assuming that's what you want too.
// jquery ui has a built in icon that shows up automatically http://jqueryui.com/demos/datepicker/#icon-trigger
// how to disable jquery ui. http://jqueryui.com/demos/datepicker/#method-disable
Here is how to disable the box once a post back happens. I am not clear if you want this to happen right after they enter something in the textbox or not though.
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="ui.all.css" rel="stylesheet" type="text/css" />
<link href="ui.core.css" rel="stylesheet" type="text/css" />
<link href="ui.datepicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function()
{
$("#txtMyTextBox").datepicker({ showOn: 'button', buttonImage: 'images/calendar.gif', buttonImageOnly: true });
var disabled = $('#txtMyTextBox').attr('disabled');
if (disabled == true)
{
$("#txtMyTextBox").datepicker('disable');
}
else
{
$("#txtMyTextBox").datepicker('enable');
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtMyTextBox" runat="server" Enabled="false"></asp:TextBox>
<asp:Button ID="enable" runat="server" Text="enable" onclick="enable_Click"
style="width: 56px" />
<asp:Button ID="disable" runat="server" Text="disable"
onclick="disable_Click" />
</div>
</form>
</body>
</html>
code behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void enable_Click(object sender, EventArgs e)
{
txtMyTextBox.Enabled = true;
}
protected void disable_Click(object sender, EventArgs e)
{
txtMyTextBox.Enabled = false;
}
}
这篇关于动态禁用jQuery Datepicker图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
