QA@IT

jQueryでの条件付き属性一括設定について

3554 PV

ASP.NET3.5で、WEBシステムを作っています。(VB.NET)

その中で、jQueryを使っているのですが、その事で質問です。

画面の中にコンボボックスが複数配置されており、そのコンボボックスは共通の同じクラス名が
指定されています。

コンボボックスには同じデータのValueとTextが指定されていて、
Aという名前のコンボボックスで111というデータを選ぶと、A以外のコンボボックスでは選べないようにしたいのです。

選べないようにするにはdisable属性を使用して、設定しているのですが、
そのときの条件が下記のとおりとなります。

1 自コンボボックスで選んでいる値は自分自身のリストの中ではdisable属性の対象外とする。

2 リストの中には未選択という項目が存在するが、それはdisable属性の設定の対象外とする。

現在、自分では繰り返し文でやっているのですが、なかなか、うまくいきません。

そこで、jQueryを使用すれば、一発(もしくは、2,3発?)で、いけるのでしょうか?

サンプルなど、何かありましたら、ご教示ください。

よろしくお願いします。

  • コンボボックスというのは ASP.NET のサーバーコントロールでは DropDownList のことを言ってますか? -
  • 現在やっているという繰り返し文はVB.NET (postbackで実施?)でしょうか、javascriptでしょうか。 -
  • >SurferOnWwwさん
    はい、そうです。<DropDownList
    ついつい、コンボボックスって言ってしまいます。

    > flied_onionさん
    javascriptでやっています。
    -

回答

すみません、自己レスです。
(遅くなりました。)

解決しました。

JS中の繰り返し文の中で、すべての条件を入れようとしていました。
しかし、こっちをやると、あっちが立たず、みたいな感じになって、
条件を両立する事ができませんでした。(ちゃんと、分ければできたのかも。。。)

とりあえず、eachを使って、やるようにしました。

日本語で書くと、こんな感じです。

//全ての子要素を初期化する
//全てのセレクト要素の取得
//選択しているテキストの配列
//選択しているテキストで繰り返す
//全ての子要素に対して処理をする
//自コンボボックスの時は除く
//選択している値が『未選択』以外、かつ、子要素のテキストが選択しているテキストと同じ場合
//使用不可にする

SurferOnWwwさん、flied_onionさん、反応ありがとうございました。
お騒がせしました。

編集 履歴 (0)

質問者さんが最終的にどうやって解決したのか分かりませんが、検証用に作ったサンプルがあるので貼っておきます。(1) 他の DropDownList で選択済みのものは選択をキャンセルする方法と、(2) 質問者さんの考えたように disable する方法の 2 種類です。

(注)ブラウザは IE9 でしか試していません。DOM Level 3 Events をサポートしていない IE8 以前、IE9 でも互換モードではうまくいかない可能性がある(未検証です)ので注意してください。

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    // 2014/3/14 QA@IT の検証用
    // http://qa.atmarkit.co.jp/q/3573

    protected void Button2_Click(object sender, EventArgs e)
    {
        Label1.Text = "";
        Label1.Text += DropDownList1.SelectedValue + ", ";
        Label1.Text += DropDownList2.SelectedValue + ", ";
        Label1.Text += DropDownList3.SelectedValue + ", ";
        Label1.Text += DropDownList4.SelectedValue + ", ";
        Label1.Text += DropDownList5.SelectedValue;
    }

    protected void Button4_Click(object sender, EventArgs e)
    {
        Label2.Text = "";
        Label2.Text += DropDownList6.SelectedValue + ", ";
        Label2.Text += DropDownList7.SelectedValue + ", ";
        Label2.Text += DropDownList8.SelectedValue + ", ";
        Label2.Text += DropDownList9.SelectedValue + ", ";
        Label2.Text += DropDownList10.SelectedValue;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

        // 選択できないようにする場合。
        $(document).ready(function () {
            $('.style1').change(function () {
                // クリックされた DropDownList の jQuery オブジェクト。
                var clickedDdl = $(this);

                // クリックされた DropDownList で選択されている項目の value
                var value = clickedDdl.children('option:selected').val();

                // value が "未選択" の項目がクリックされた場合は何もしない。
                // (何もしなくても "未選択" の項目が選択された状態になる)
                if (value == '未選択') {
                    return;
                }

                // クリックされた DropDownList の ClientID
                var id1 = clickedDdl.attr("id");

                // 他の DropDownList の選択済み項目を調べる。
                $('.style1').each(function () {
                    var id2 = $(this).attr("id");

                    // 自分自身はスキップ。
                    if (id1 != id2) {
                        $(this).children('option:selected').each(function () {
                            // 選択されている項目が "未選択" の場合は何もしない。
                            if ($(this).val() == '未選択') {
                                return;
                            }

                            // 他の DropDownList で同じ項目が選択済みの場合は、選択を
                            // キャンセルし、強制的に "未選択" の項目を選択させる。
                            if ($(this).val() == value) {
                                clickedDdl.children('option:selected').removeAttr('selected');
                                clickedDdl.children('option[value=未選択]').attr('selected', 'selected');
                            }
                        });
                    }
                });
            });
        });

        function resetDropDownLists1() {
            $('.style1 option').each(function () {
                if ($(this).val() == '未選択') {
                    $(this).attr('selected', 'selected');
                } else {
                    $(this).removeAttr('selected');
                }
            });
            $('#Label1').text('');
        }

        // disable する場合。
        $(document).ready(function () {
            $('.style2').change(function () {
                // クリックされた DropDownList の jQuery オブジェクト。
                var clickedDdl = $(this);

                // クリックされた DropDownList で選択されている項目の value
                var value = clickedDdl.children('option:selected').val();

                // value が "未選択" の項目がクリックされた場合は何もしない。
                if (value == '未選択') {
                    return;
                }

                // クリックされた DropDownList の ClientID
                var id1 = clickedDdl.attr("id");

                // 他の DropDownList の同じ項目を disable する。
                $('.style2').each(function () {
                    var id2 = $(this).attr("id");

                    // 自分自身はスキップ。
                    if (id1 != id2) {
                        $(this).children('option').each(function () {
                            // 項目が "未選択" の場合は何もしない。
                            if ($(this).val() == '未選択') {
                                return;
                            }

                            if ($(this).val() == value) {
                                $(this).attr('disabled', 'disabled');
                            }
                        });
                    }
                });

            });
        });

        function resetDropDownLists2() {
            $('.style2 option').each(function () {
                if ($(this).val() == '未選択') {
                    $(this).attr('selected', 'selected');
                } else {
                    $(this).removeAttr('selected');
                }
                $(this).removeAttr('disabled');
            });
            $('#Label2').text('');
        }

    //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <h3>選択できないようにする場合</h3>
    <div>
        <asp:DropDownList ID="DropDownList1" runat="server" CssClass="style1">
            <asp:ListItem Value="未選択"> 未選択 </asp:ListItem>
            <asp:ListItem Value="White"> White </asp:ListItem>
            <asp:ListItem Value="Silver"> Silver </asp:ListItem>
            <asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
            <asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
            <asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList2" runat="server" CssClass="style1">
            <asp:ListItem Value="未選択"> 未選択 </asp:ListItem>
            <asp:ListItem Value="White"> White </asp:ListItem>
            <asp:ListItem Value="Silver"> Silver </asp:ListItem>
            <asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
            <asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
            <asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList3" runat="server" CssClass="style1">
            <asp:ListItem Value="未選択"> 未選択 </asp:ListItem>
            <asp:ListItem Value="White"> White </asp:ListItem>
            <asp:ListItem Value="Silver"> Silver </asp:ListItem>
            <asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
            <asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
            <asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList4" runat="server" CssClass="style1">
            <asp:ListItem Value="未選択"> 未選択 </asp:ListItem>
            <asp:ListItem Value="White"> White </asp:ListItem>
            <asp:ListItem Value="Silver"> Silver </asp:ListItem>
            <asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
            <asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
            <asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList5" runat="server" CssClass="style1">
            <asp:ListItem Value="未選択"> 未選択 </asp:ListItem>
            <asp:ListItem Value="White"> White </asp:ListItem>
            <asp:ListItem Value="Silver"> Silver </asp:ListItem>
            <asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
            <asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
            <asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
        </asp:DropDownList>
        <input id="Button1" type="button" value="reset" onclick="javascript:resetDropDownLists1();" />
    </div>
    <asp:Button ID="Button2" runat="server" Text="Show SelectedValues" OnClick="Button2_Click" />
    <br />
    <asp:Label ID="Label1" runat="server"></asp:Label>

    <hr />

    <h3>disable する場合</h3>
    <p>問題は、ポストバック後の再描画で、前画面の disable の情報をどう反映するか。<br />
    さらに、一旦選択してから "未選択" に戻したとき、disable をどう解除するか。<br />
    隠しフィールドに前の選択情報を保持し、それをベースに disable を再設定するような操作が必要。</p>
    <div>
        <asp:DropDownList ID="DropDownList6" runat="server" CssClass="style2">
            <asp:ListItem Value="未選択"> 未選択 </asp:ListItem>
            <asp:ListItem Value="White"> White </asp:ListItem>
            <asp:ListItem Value="Silver"> Silver </asp:ListItem>
            <asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
            <asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
            <asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList7" runat="server" CssClass="style2">
            <asp:ListItem Value="未選択"> 未選択 </asp:ListItem>
            <asp:ListItem Value="White"> White </asp:ListItem>
            <asp:ListItem Value="Silver"> Silver </asp:ListItem>
            <asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
            <asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
            <asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList8" runat="server" CssClass="style2">
            <asp:ListItem Value="未選択"> 未選択 </asp:ListItem>
            <asp:ListItem Value="White"> White </asp:ListItem>
            <asp:ListItem Value="Silver"> Silver </asp:ListItem>
            <asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
            <asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
            <asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList9" runat="server" CssClass="style2">
            <asp:ListItem Value="未選択"> 未選択 </asp:ListItem>
            <asp:ListItem Value="White"> White </asp:ListItem>
            <asp:ListItem Value="Silver"> Silver </asp:ListItem>
            <asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
            <asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
            <asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="DropDownList10" runat="server" CssClass="style2">
            <asp:ListItem Value="未選択"> 未選択 </asp:ListItem>
            <asp:ListItem Value="White"> White </asp:ListItem>
            <asp:ListItem Value="Silver"> Silver </asp:ListItem>
            <asp:ListItem Value="DarkGray"> Dark Gray </asp:ListItem>
            <asp:ListItem Value="Khaki"> Khaki </asp:ListItem>
            <asp:ListItem Value="DarkKhaki"> Dark Khaki </asp:ListItem>
        </asp:DropDownList>
        <input id="Button3" type="button" value="reset" onclick="javascript:resetDropDownLists2();" />
    </div>
    <asp:Button ID="Button4" runat="server" Text="Show SelectedValues" OnClick="Button4_Click" />
    <br />
    <asp:Label ID="Label2" runat="server"></asp:Label>
    </form>
</body>
</html>
編集 履歴 (1)
ウォッチ

この質問への回答やコメントをメールでお知らせします。