一个可以处理多个元素的函数

Question

我在一个表单上有大约 50 个 RadioButtonList，旁边有一个复选框。当您选中复选框时，radioButtonList 将启用。我有代码使它适用于一个，但我正在寻找一种方法来编写一个适用于所有 50 个 RadioButtonList 的函数，而不是编写 50 个不同的函数。复选框和 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>

Answer 1

重写

我相信您要执行的操作是切换与给定单选按钮匹配的下拉列表的启用/禁用状态。单选按钮和下拉列表存储在表格中。如果单选按钮被“选中”，您希望启用下拉列表。否则，您希望将其禁用。

在将复选框绑定到其目标下拉列表的标记中创建自定义属性。例如，像这样修改标记：

<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。
• 我不得不将函数分成两部分。一个用于点击处理程序，另一个用于树遍历。
• 复选框应包含指向其匹配单选按钮列表的 TARGET 属性。 （其值应该是单选按钮列表的 ID。）
• 您不需要在标签中设置 onclick 处理程序；这将在您调用 setCheckBoxHandlers 时自动发生。这是一个不错的解决方案，因为它可以让您以后更轻松地向表中添加新行。

希望这对你有用！

Answer 2

<asp:CheckBox ID="CheckBox1" runat="server" OnClick="return disable(this);" />

function disable(c) {
   return c.checked ? dis() : able();
}