0

我正在创建一个控件，该控件将在单击按钮时启用/禁用 aspx 页面的一部分。我在 jquery 中找到了一个代码片段，它将对所有值执行此操作，但我想将锁定/编辑部分限制为 asp 面板。

1）这可能吗？

2) 如何更改 jquery 代码以仅切换 Panel1 中的字段？

我对 Jquery 很陌生。

感谢您对未来的任何指导！

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ChangeControl3.aspx.cs" Inherits="Test_ChangeControl3" %>

<!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>
<meta charset=utf-8 />
<title>Test Lock/Edit Control</title>
<link type="text/css" rel="Stylesheet"href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/redmond/jquery-ui.css" />
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

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

    $("*").attr("disabled", "disabled"); 
     $(this).attr("disabled", ""); 
    }, function() {
     $("*").attr("disabled", ""); 

     });
   });

</script>

</head>
<body>
<form runat="server">
<asp:Panel ID="Panel1" runat="server">
<div>
 <asp:Label runat="server" ID="lblFname" Text="First Name:" ></asp:Label>
 <asp:TextBox runat="server" ID="fname"></asp:TextBox>
</div>
<div>
 <asp:Label runat="server" ID="lblLname" Text="Last Name:"></asp:Label>
 <asp:TextBox runat="server" ID="lname"></asp:TextBox>
</div>
<div>
 <asp:Label runat="server" ID="lblCompany" Text="Company:" ></asp:Label>
 <asp:TextBox runat="server" ID="cname"></asp:TextBox>
</div>
</asp:Panel>  
  <br />
   <asp:Button runat="server" id="btnEnableDisable" Text="Lock/Edit" />
  <br />

  <input type="checkbox" name="qrentown" value="Do you own a home?" /> Do you own a home?<br /><br/>
   <select name="rentown">
   <option value="own">Own</option>
   <option value="rent">Rent</option>
   <option value="none">N/A</option>
  </select><br/>
  <input readonly="readonly" value="Describe your living situation"/><br />
  <textarea rows="3" cols="40" > </textarea>
  <br/><br/>


</form>
</body>
</html>
4

2 回答 2

1

您应该在 jQuery 中使用面板 ID Panel1：

$("[id$='Panel1']").children().attr("disabled", "disabled");

请注意，这会得到一个以您的 id 结尾的 id，因为服务器将添加到该 id 的开头。

同样的问题btnEnableDisable

切换是一个动画事件，你想要一个点击事件。

所以，让我们使用您的按钮来保持事物的当前状态，然后根据您的点击启用/禁用：

$(document).ready(function() {
    $("[id$='btnEnableDisable']").data('isenabled', true);//enabled assumption
    $("[id$='btnEnableDisable']").click(function() {
        var currentState = $(this).data('isenabled');
        if (currentState) {
            $("[id$='Panel1']").children().prop("disabled", "disabled");
        } else {
            $("[id$='Panel1']").children().removeProp("disabled");
        }
        $(this).data('isenabled', !currentState);
    });
});

非常详细地展示了我们在这里所做的事情:)

于 2012-06-20T13:15:17.260 回答
0

我通常只使用周围的 div 标签来显示和隐藏面板。

<script type="text/javascript">

    hideAllDivs = function () {
        $("#div_id").hide();

    };

   $("#btnEnableDisable").click(function() {

        $("#div_id").show();

    };
</script

div 内容看起来像这样

<div id="div_id">
    <asp:Panel ID="Panel1" runat="server">
    <div>
     <asp:Label runat="server" ID="lblFname" Text="First Name:" ></asp:Label>
     <asp:TextBox runat="server" ID="fname"></asp:TextBox>
    </div>
    <div>
     <asp:Label runat="server" ID="lblLname" Text="Last Name:"></asp:Label>
     <asp:TextBox runat="server" ID="lname"></asp:TextBox>
    </div>
    <div>
     <asp:Label runat="server" ID="lblCompany" Text="Company:" ></asp:Label>
     <asp:TextBox runat="server" ID="cname"></asp:TextBox>
    </div>
    </asp:Panel>
</div>



<asp:Button runat="server" id="btnEnableDisable" Text="Lock/Edit" />

希望这可以帮助，

于 2012-06-20T12:42:20.287 回答