0

ボタンをクリックしたときにaspxページのセクションを有効/無効にするコントロールの作成に取り組んでいます。すべての値に対してこれを行うjqueryのコードスニペットを見つけましたが、ロック/編集部分をaspパネルに制限したいと思います。

1）これは可能ですか？

2）Panel1内のフィールドのみを切り替えるようにjqueryコードを変更するにはどうすればよいですか？

私は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ではパネルIDPanel1を使用する必要があります。

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

私たちがここで何をしているのかを正確に示すためにかなり冗長です:)

于 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 に答える