[java script] 다중(멀티) 라디오 버튼 설정시 일부 라디오 버튼 비활성화, multi radio button

[java script] 다중(멀티) 라디오 버튼 설정시 일부 라디오 버튼 비활성화, multi radio button

 - 'Radio Button Group B' can be disabled by 'Radio Button Group A' selected.

 - Multiple Radio button

/////////////////////////////////////////////////////////////////////////////

// - ※ 본 소스는 개인적인 용도로 작성 된 것이므로, 오류가 있을 수 있으니...

// - ...본 포스팅을 읽으시는 분들께서는 이 점 숙지 하시기 바랍니다. 감사합니다.

/////////////////////////////////////////////////////////////////////////////

* Situation

Radio Button, Group A: radio A1, radio A2, radio A3

Radio Button, Group B: radio B1, radio B2, radio B3

// Gruop B의 Radio Button 선택시... 조건에 따라 Group A의 Radio Button 비활성화/활성화

1. Java Script

<script type="text/javascript"> <%-- // 'Group B'에 따른 Radio버튼('Group A')의 비활성화 --%>         function doLockRadio() { var r = document.Form1.RadioB[2].checked; <%-- // Group B: radio checked 확인--%> var legnth = document.Form1.RadioA.length;          <%-- // Group B: B1 ... B1 선택시 Group A 는 전체 비활성화 --%> if(r) { document.Form1.RadioA[0].checked = true; for(i=0; i<legnth; i++) { document.Form1.RadioA[i].disabled = true; } } <%-- // Group B: Others(B2, B3)--%> else { for(i=0; i<legnth; i++) { document.Form1.RadioA[i].disabled = false; } } }    </script>

2. JSP

<form action="/abcabc.act" name="Form1" method="post"> <table> <tr> <th><label for="s04-01">Radio Button Group A</label></th> <td> <input type="radio" name="RadioA" id="r01-01" checked="checked"/> <label for="r01-01">ALL Text</label> <input type="radio" name="RadioA" id="r01-02" value="A1" onclick="doLockRadio();" <s:if test='#RadioA == ("A1")' >checked="checked"</s:if> /> <label for="s04-02">A1 Text</label> <input type="radio" name="RadioA" id="r01-03" value="A2" onclick="doLockRadio();" <s:if test='#RadioA == ("A2")' >checked="checked"</s:if>/> <label for="s04-03">A2 Text</label> <input type="radio" name="RadioA" id="r01-04" value="A3" onclick="doLockRadio();" <s:if test='#RadioA == ("A3")' >checked="checked"</s:if>/> <label for="s04-04">A3 Text</label>                             </td> </tr> <tr> <th><label for="s06-01">Radio Button Group B</label></th> <td> <input type="radio" name="RadioB" id="r02-01" checked="checked"/> <label for="r02-01">ALL Text</label> <input type="radio" name="RadioB" id="r02-02" value="B1" <s:if test='#RadioB == ("B1")' >checked="checked"</s:if>/> <label for="r02-02">B1 Text</label> <input type="radio" name="RadioB" id="r02-03" value="B2" <s:if test='#RadioB == ("B2")' >checked="checked"</s:if>/> <label for="r02-03">B2 Text</label> <input type="radio" name="RadioB" id="r02-04" value="B3" <s:if test='#RadioB == ("B3")' >checked="checked"</s:if>/> <label for="r02-04">B3 Text</label> </td> </tr> </table>  </form>