2012-06-20 51 views
0

我正在創建一個控件,可以在單擊按鈕時啓用/禁用一個aspx頁面。我在jquery中找到了一個代碼片段,它可以爲所有值做到這一點,但我想限制鎖定/編輯部分爲一個asp面板。啓用/禁用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> 

回答

1

你應該使用面板ID Panel1的在你的jQuery:

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

相當詳細準確地展示一下我們在這裏做:)

0

我無法使用周圍的div標籤顯示和隱藏面板。

<script type="text/javascript"> 

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

    }; 

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

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

    }; 
</script 

股利內容看起來像這樣

<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" /> 

希望這有助於