2012-05-04 3 views
0

양식 옆에 확인란이있는 약 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> 
사전

감사
+1

jQuery를 사용하고 있습니까? – Shyju

+0

확실히 좋을 것입니다. 감사합니다. – user973671

+0

이 HTML로 표시되는 방법을 보여줄 수 있습니까? – david

답변

0

REWRITE

난 당신이 수행 할 작업은 주어진 라디오 버튼을 일치 드롭 다운 목록의 활성화/비활성화 상태를 전환하는 것이라고 생각합니다. 라디오 버튼과 드롭 다운 목록은 테이블에 저장됩니다. 라디오 버튼이 "선택"되어 있으면 드롭 다운 목록을 활성화해야합니다. 그렇지 않으면 사용하지 못하게 할 수 있습니다.

확인란을 대상 드롭 다운 목록에 바인딩하는 태그에 사용자 지정 특성을 만듭니다. 그런 다음

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

자바 스크립트의 조각을 사용하여 이상 양식에있는 모든 체크 박스를 반복하고 그들에 대한 이벤트 처리기를 설정 예를 들어, 다음과 같은 마크 업을 수정합니다.

은 (난 당신이 너무 오래가 설립 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"); 
    } 
} 

가있다 드롭 다운 목록에서, 그 안에서 idividual ListItems를 활성화/비활성화 할 필요가 없습니다.

HTML이 실제로 생성 될 수있는 것처럼 보입니다 (그렇지 않을 경우 후보가 될 가능성이 높음). 문제가 제대로 이해되면 이 제대로 작동해야합니다.

UPDATE

이 나는 ​​일이 있지만 당신 말이 맞아요 : ASP.NET의 펑키 테이블 기반 레이아웃을 당신이 원하는 무엇으로 위력을 과시. 좋은 소식은 할 수 있다는 것입니다. :)

http://jsfiddle.net/tyrantmikey/RxY5s/에서 해결 방법을 찾을 수 있습니다. 다음을 참고하십시오.

  • 문서로드 중에 setCheckBoxHandlers를 호출해야합니다.
  • 함수를 두 부분으로 나눠야했습니다. 하나는 클릭 처리기 용이고 다른 하나는 트리 순회를위한 것입니다.
  • 확인란에는 일치하는 radiobuttonlist를 가리키는 TARGET 속성이 포함되어야합니다. 값은 라디오 버튼 목록의 ID 여야합니다.
  • 태그에 onclick 처리기를 설정할 필요가 없습니다. 이것은 setCheckBoxHandlers를 호출 할 때 자동으로 발생합니다. 나중에 테이블에 새 행을 추가하는 것이 더 쉬워 지므로 좋은 솔루션입니다.

희망이 당신을위한 트릭을!

+0

이것은 Radiobuttonlist가 아닌 체크 박스를 비활성화합니다. 이것은 내 코드 http : // jsfiddle를 추가 한 것입니다. .net/uXjC9/ – user973671

+0

네, 실제로 Radiobuttonlist입니다. 실제로 많은 입력 값을 렌더링 할 때 코드 작업을 시도했지만 꽤 얻을 수는 없습니다.이 HTML은 렌더링 할 때 렌더링됩니다. ASP, http://jsfiddle.net/zvWxb/, 모든 도움을 주셔서 감사합니다 – user973671

+0

@ user973671 : 응답을 업데이트했습니다! 알았어. :) –

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

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

어떻게 든 올바른 RadioButtonList를 전달해야합니다. – user973671

+0

@ user973671 네, 당신은 절대적으로 옳습니다. 하지만 질문은 분명하지 않습니다. 예를 들어 "MainContent_RadioButtonList1"과 같은 요소가 없습니다. – ocanal

+0

네, 맞습니다. Visual Studio에서 실행할 때 어떤 이유로 컨트롤 ID에 contentPlaceHolderID를 추가하여 MainContent_RadioButtonList1이됩니다. – user973671

관련 문제