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" OnClick="return disable(this);" />

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

Answer 2

<强> REWRITE

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

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

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

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

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

<强>更新

我有它的工作，但你是对的：ASP.NET的基于表格的时髦布局会对你想做的事情造成严重破坏。好消息是，它可以做到。：）

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

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

希望这对您有所帮助！

一个可以使用多个元素的函数

2 个答案: