一個功能，將與多個元素

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