1

最後から 2 番目の列に Textbox (jQueryUI DatePicker ウィジェットで埋められる) と RadioButtonList が含まれる GridView があります。また、最後の列にはチェックの画像があります (stackoverflow の「回答済み」および「未回答」チェックに似ています)。

私が必要とするのは、できれば Javascript を使用して、ユーザーがテキスト ボックスの値を何か (私の場合は日付) に変更し、ラジオ ボタンを選択してから、画像ソースを空のチェックマークから色付きのチェックマーク (繰り返しますが、stackoverflow の回答チェックに似ています)。また、ユーザーがテキスト ボックスからすべてのテキストを削除した場合は、画像ソースを空のチェックマークに戻す必要があります。ああ、画像の代替テキストも変更する必要があります。

マイ グリッドビュー

<asp:GridView ID="gvBlah" runat="server" AutoGenerateColumns="false">
            <Columns>
                ...       
                <asp:TemplateField>
                    <HeaderTemplate> 
                        <asp:Label ID="warrantyDateHeader" Text="Warranty Date" ToolTip="Choose a date..." runat="server" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:TextBox ID="txtWarrantyDate" runat="server" CssClass="datepicker" />
                        <asp:RadioButtonList ID="rblWarrantyDate" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Value="0" Text="Start" />
                            <asp:ListItem Value="1" Text="End" />
                        </asp:RadioButtonList>
                    </ItemTemplate>
                    <ItemStyle VerticalAlign="Top" HorizontalAlign="Center" />
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Image ID="imgRowChecked" ImageUrl="~/images/check-empty.png" AlternateText="Not Selected"  runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

アップデート

与えられた答えを使用して、これが最良の解決策になりました。

var dateStatus = 0 // global variable
var WarrantyStatus = 0 // global variable
$(".datepicker").change(function () {
    if ($(this).val().length == 0) {
        dateStatus = 0;
        $(".chkSerialNumber").removeClass("check-filled").addClass("check-empty");
    }
    else {
        dateStatus = 1;
        if (WarrantyStatus > 0) {
            $(".chkSerialNumber").addClass("check-filled").removeClass("check-empty");
        }
    }
});
$(".rbl").change(function () {
    WarrantyStatus = 1;
    if (dateStatus = 1) {
        $(".chkSerialNumber").addClass("check-filled").removeClass("check-empty");
    }
});
4

1 に答える 1

2

グリッドビュー内で複数の編集を実装していないと思います。したがって、日付テキストボックスの長さをテストするjQueryコードは次のとおりです。

次のような CSS クラスとして画像を作成することをお勧めします。

div.check-empty {
    background: url("/images/check-empty.png") repeat scroll 0 0 transparent;
    height: 11px;
    width: 55px;
}

div.checked-green {
    background: url("/images/check-green.png") repeat scroll 0 0 transparent;
    height: 11px;
    width: 55px;
}

次のように、デフォルトとしてグリッドビュー内にこれを提供します。

<div class="check-empty"></div>

上記の理由は、jQuery を使用して画像を動的に操作できるためです。

したがって、残りのコードは次のようになります。

  1. 日付テキストボックスに値が含まれていることを確認するには:

    var dateStatus = 0 // global variable
var WarrantyStatus = 0 // global variable

$('.datepicker').blur(function() 
{       
   if($(this).val().length == 0)
     dateStatus = 0;
   else
    {
     dateStatus = 1;
     if(WarrantyStatus != 0)
      $(".check-empty").addClass("checked-green");
    }

 }

  2. ユーザーがラジオボタンを変更したかどうかを確認するには：

    $("rblWarrantyDate").change(function()
{
   if ($(this).val() == '1') 
   {
      WarrantyStatus = 1;
      if(dateStatus != 0)
      $(".check-empty").addClass("checked-green");
   }
   else
       WarrantyStatus = 0;
});
于 2012-12-10T14:22:33.147 に答える