Одна функция, которая будет работать с несколькими элементами

Question

У меня около 50 RadioButtonList на форме с флажком рядом с ними. Когда вы установите флажок, функция radioButtonList активируется. У меня есть код, чтобы он работал для одного, но я ищу способ написать одну функцию, которая будет работать для всех 50 RadioButtonList вместо того, чтобы писать пятьдесят различных функций. Флажки и списки RadioButtonList находятся в таблице. Заранее спасибо

<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, который указывает на соответствующий сопоставительный список радиообмена. (Его значение должно быть идентификатором списка переключателей.)
• Вам не нужно устанавливать обработчик onclick в тег; это произойдет автоматически, когда вы вызываете setCheckBoxHandlers. Это приятное решение, так как это упрощает добавление новых строк в таблицу позже.

Надеюсь, что это трюк для вас!

Answer 2

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

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