一个功能，将与多个元素

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

REWRITE

我相信你要执行的动作是触发一个下拉列表中匹配一个给定的单选按钮的启用/禁用状态。单选按钮和下拉列表存储在一个表中。如果单选按钮被“检查”，您希望启用下拉列表。否则，你希望它被禁用。

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

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

然后，使用一块的JavaScript的迭代的形式对所有的复选框并设置的事件处理程序他们。

（我选择的目标如下我的属性名称，你可以使用任何你喜欢保存按键，只要它不与已建立的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看起来可能实际上会生成（如果不是，它可能是它的候选人），所以这应该工作得很好前提是我已正确理解问题。

UPDATE

我有工作，但你说得对：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(); 
}