複数の要素で機能する1つの関数

Question

フォームには約50のRadioButtonListがあり、隣にチェックボックスがあります。チェックボックスをオンにすると、radioButtonListが有効になります。私はそれを動作させるためのコードを持っていますが、私は50種類の関数を記述するのではなく、50 RadioButtonListすべてで機能する関数を書く方法を探しています。チェックボックスと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"); 
    } 
} 

これがあるのでドロップダウンリストでは、その中の個別のListItemを有効または無効にする必要はありません。

あなたのHTMLは実際に生成されるかもしれません（もしそうでなければ、その候補になる可能性が高い）ので、問題が正しく理解されていれば、これはかなりうまくいくはずです。

UPDATE

私はそれが働いていますが、あなたは正しい：ASP.NETのファンキーなテーブルベースのレイアウトは、あなたが何をしたいと大混乱をもたらします。良いニュースは、それができることです。 :)

解決策はhttp://jsfiddle.net/tyrantmikey/RxY5s/にあります。次の点に注意してください。

• ドキュメントロード時に、setCheckBoxHandlersを呼び出す必要があります。
• 私は関数を2つの部分に分割しなければなりませんでした。 1つはオンクリックハンドラ、もう1つはツリートラバーサルです。
• このチェックボックスには、一致するradiobuttonlistを指すTARGET属性が含まれている必要があります。 （その値はラジオボタンリストのIDでなければなりません）
• タグにonclickハンドラを設定する必要はありません。これは、setCheckBoxHandlersを呼び出すと自動的に発生します。後でテーブルに新しい行を追加するのが簡単になるので、これは素晴らしい解決策です。

これはあなたのためのトリックです！

Answer 2

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

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