Question

我正在创建一个控件，用于在单击按钮时启用/禁用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>

Answer 1

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

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

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

与btnEnableDisable

相同的问题

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

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

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

非常详细，以准确显示我们在这里做了什么：）

Answer 2

我通常使用周围的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" />

希望这有帮助，

启用/禁用jquery切换和asp面板

2 个答案: