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

One function that will work with multiple elements

本文关键字：元素 函数 一个 可处理      更新时间：2023-09-26

我在一个表单上有大约 50 个单选按钮列表，旁边有一个复选框。当您选中该复选框时，单选按钮列表将启用。我有代码可以使其适用于一个，但我正在寻找一种方法来编写一个适用于所有 50 个 RadioButtonList 的函数，而不是编写 50 个不同的函数。复选框和单选按钮列表位于表中。提前致谢

    <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>

重写

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

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

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

由于这是一个下拉列表，我认为没有必要在其中启用/禁用单独的列表项。

您的 HTML 看起来实际上可能被生成(如果没有，它很可能是它的候选者(，所以只要我正确理解了问题，这应该可以很好地工作。

更新

我让它工作，但你是对的：ASP。NET时髦的基于表格的布局对您想要做的事情造成了严重破坏。好消息是，这是可以做到的。:)

您可以在 http://jsfiddle.net/tyrantmikey/RxY5s/找到有效的解决方案。请注意以下几点：

  • 在文档加载期间，您需要调用 setCheckBoxHandlers。
  • 我不得不将函数分成两部分。一个用于单击处理程序，另一个用于树遍历。
  • 该复选框应包含一个指向其匹配单选按钮列表的 TARGET 属性。(其值应为单选按钮列表的 ID。
  • 您不需要在标记中设置 onclick 处理程序;当您调用 setCheckBoxHandlers 时，这将自动发生。这是一个很好的解决方案，因为它可以更轻松地以后向表中添加新行。

希望这对你有用！

<asp:CheckBox ID="CheckBox1" runat="server" OnClick="return disable(this);" />
function disable(c) {
   return c.checked ? dis() : able();
}
相关文章：