0

横にチェックボックスがあるフォームに約 50 の RadioButtonList があります。チェックボックスをオンにすると、radioButtonList が有効になります。私はそれを機能させるコードを持っていますが、50 の異なる関数を記述する代わりに、50 の RadioButtonList すべてで機能する 1 つの関数を記述する方法を探しています。チェックボックスと RadioButtonLists はテーブルにあります。前もって感謝します

    <script type="text/javascript">
        function dis() {
            var controlObject = document.getElementById('MainContent_RadioButtonList1');
            controlObject.removeAttribute('disabled')
            RecursiveDisable(controlObject);
            return false;
        }
        function RecursiveDisable(control) {
            var children = control.childNodes;
            try { control.removeAttribute('disabled') }
            catch (ex) { }
            for (var j = 0; j < children.length; j++) {
                RecursiveDisable(children[j]);
                //control.attributes['disabled'].value = '';     

            }
        }
        function able() {
            var controlObject = document.getElementById('MainContent_RadioButtonList1');
            controlObject.setAttribute('disabled')
            RecursiveDisable2(controlObject);
            return false;
        }
        function RecursiveDisable2(control) {
            var children = control.childNodes;
            try { control.setAttribute('disabled') }
            catch (ex) { }
            for (var j = 0; j < children.length; j++) {
                RecursiveDisable2(children[j]);
                //control.attributes['disabled'].value = '';     

            }
        }


        function disable() {
        var checkbox = document.getElementById('MainContent_CheckBox1');
            if (
            checkbox.checked == true)
                dis();
            else
            able();
            }
    </script>



    <table>
    <tr>
    <td><asp:CheckBox ID="CheckBox1" runat="server" OnClick="return disable();" /></td>
    <td>
    <asp:RadioButtonList ID="RadioButtonList1" runat="server" Enabled="false">
    <asp:ListItem value="1">ListItem 1</asp:ListItem>
    <asp:ListItem value="2">ListItem 2</asp:ListItem>
    <asp:ListItem value="3">ListItem 3</asp:ListItem>
    </asp:RadioButtonList>
    </td>
    </tr>
    <tr>
    <td><asp:CheckBox ID="CheckBox2" runat="server" OnClick="return disable();" /></td></td>
    <td>
    <asp:RadioButtonList ID="RadioButtonList2" runat="server" Enabled="false">
    <asp:ListItem value="1">ListItem 1</asp:ListItem>
    <asp:ListItem value="2">ListItem 2</asp:ListItem>
    <asp:ListItem value="3">ListItem 3</asp:ListItem>
    </asp:RadioButtonList>
    </td>
    </tr>
    </table>
4

2 に答える 2

0

リライト

あなたが実行したいアクションは、特定のラジオ ボタンに一致するドロップダウン リストの有効/無効状態を切り替えることだと思います。ラジオ ボタンとドロップダウン リストはテーブルに格納されます。ラジオ ボタンが「チェック」されている場合は、ドロップダウン リストを有効にする必要があります。それ以外の場合は、無効にする必要があります。

チェックボックスをターゲット ドロップダウン リストにバインドするカスタム属性をマークアップに作成します。たとえば、次のようにマークアップを変更します。

<asp:CheckBox ID="CheckBox1" 
              runat="server" 
              target="DropDownList1" />

次に、JavaScript の一部を使用してフォーム上のすべてのチェックボックスを反復処理し、それらのイベント ハンドラーを設定します。

(以下の属性名として target を選択しました。確立された DOM 属性と衝突しない限り、キーストロークを節約するために好きなものを使用できます。)

function setCheckBoxHandlers()
{
    var boxes = document.getElementsByTagName("input");
    for (box in boxes)
    {
        // Only bind those that have a target attribute; leave all 
        // others alone.
        if (box.getAttribute("type").toLowerCase() == "checkbox" &&
            box.getAttribute("target") != null)
        {
            // Set up the onclick handler.
            box.onclick = toggleCheckBox;
        }
   }
}

function toggleCheckBox(e)
{
    // Mozilla browsers pass the event source as argument zero. Microsoft
    //  doesn't; get it from the window.
    e = e || window.event.source;
    var target = document.getElementById(e.getAttribute("toggleTarget"));
    if (e.checked)
    {
        target.removeAttribute("disabled");
    } 
    else
    {
        target.setAttribute("enabled");
    }
}

これはドロップダウン リストであるため、その中の個々の ListItems を有効/無効にする必要はないと思います。

あなたの HTML は実際に生成されているように見えます (そうでない場合は、その候補である可能性があります) 。問題を正しく理解していれば、これはかなりうまく機能するはずです。

アップデート

私はそれを機能させましたが、あなたの言うとおりです。ASP.NET のファンキーなテーブル ベースのレイアウトは、やりたいことを台無しにします。良いニュースは、それができるということです。:)

http://jsfiddle.net/tyrantmikey/RxY5s/で実用的なソリューションを見つけることができます。次の点に注意してください。

  • ドキュメントのロード中に、setCheckBoxHandlers を呼び出す必要があります。
  • 関数を 2 つの部分に分割する必要がありました。1 つはクリック ハンドラ用で、もう 1 つはツリー トラバーサル用です。
  • チェックボックスには、一致する radiobuttonlist を指す TARGET 属性を含める必要があります。(その値は、ラジオ ボタン リストの ID である必要があります。)
  • タグに onclick ハンドラを設定する必要はありません。これは、setCheckBoxHandlers を呼び出すと自動的に行われます。これは、後でテーブルに新しい行を簡単に追加できるため、優れたソリューションです。

これでうまくいくことを願っています！

于 2012-05-04T17:47:18.377 に答える
0 
<asp:CheckBox ID="CheckBox1" runat="server" OnClick="return disable(this);" />

function disable(c) {
   return c.checked ? dis() : able();
}
于 2012-05-04T17:34:54.620 に答える