자바스크립트 축약 방법 조언구합니다.

자바스크립트 축약 방법 조언구합니다.

QA

자바스크립트 축약 방법 조언구합니다.

본문

----------------

 

ㅁ 경조사  ㅁ 경조사비  ㅁ경조휴가

 

<input type="checkbox" id="a" value="경조사" onclick="toggleTextbox(this)" >경조사</span>
<input type="checkbox" class="smallchk" id='incheck' value="경조사비" disabled>경조사비</span>
<input type="checkbox" class="smallchk" id='incheck1' value="경조휴가" disabled>경조휴가</span>

 


                        <script type="text/javascript">
                            function toggleTextbox(checkbox) {

                                  const textbox_elem = document.getElementById('incheck');
                                  textbox_elem.disabled = checkbox.checked ? false : true;
                                 
                                  if(textbox_elem.disabled) {
                                    textbox_elem.value = null;
                                  }else {
                                    textbox_elem.focus();
                                  }

 

 

                                  const textbox_elem1 = document.getElementById('incheck1');
                                  textbox_elem1.disabled = checkbox.checked ? false : true;
                                 
                                  if(textbox_elem1.disabled) {
                                    textbox_elem1.value = null;
                                  }else {
                                    textbox_elem1.focus();
                                  }

                            }
                        </script>

 

-----------------------

 

위와 같이 대표 체크박스를 선택하면 이하 체크박스가 활성화 되는 자바스크립트를 만들었습니다. 

그런데,, 이런식으로 textbox_elem 값을 각각 지정할 경우, 스크립트가 굉장히 길어질 것 같은데요. 이외에도 같은 형식으로 20개를 만들어야 하는데,, toggleTextbox(this) 이건 세트당 하나씩 만들어야 한다고 쳐도... const textbox_elem1 = document.getElementById('incheck1'); 이부분의 소스를 최소화 하는 방법이 있는지 조언 구합니다. 

 

항상 도움 많이 받고 있습니다.

감사합니다.

 

 

 

이 질문에 댓글 쓰기 :

답변 2

그누보드에서는 기본적으로 들어가는 jquery를 이용하면 한줄이면 됩니다

 function toggleTextbox(checkbox) {
  $(".smallchk").attr("disabled", checkbox.checked); 
 }

 

네 답변 감사합니다.
하지만 이렇게 하니 거꾸로 작동을 하네요. 메인 체크박스를 체크하면 disabled 되어 있던 체크박스가 해제가 되어야 하는데, 반대가 되네요.

그래서 attr 대신 removeattr 을 사용해보니,,, 해제는 되는데, 다시 disabled가 되지 않네요...

function toggle1(checkbox) {
if($("#t").is(":checked")){
$("#t1").removeAttr("disabled", false);
}else{
$("#t1").attr("disabled", true);
}
}

이렇게 if문을 쓰니 되는데요. 이게 최선일까요??? 더 줄일수 있을까요?


<input type="checkbox" id="my" value="경조사">경조사
<input type="checkbox" class="smallchk" id='incheck1' value="경조사비">경조사비
<input type="checkbox" class="smallchk" id='incheck2' value="경조휴가">경조휴가
<input type="checkbox" class="smallchk" id='incheck3' value="경조사비">경조사비
<input type="checkbox" class="smallchk" id='incheck4' value="경조휴가">경조휴가
 
<script>
inputTotal = 4;
my.onclick = function() {
    for (i = 1; i <= inputTotal; i++) window["incheck" + i].disabled = !this.checked;
}
my.onclick();
</script>

 

여기서 inputTotal 이 4가 아니라 5 또는 100 이 될 경우 그 토탈번호를 추출하는 일반식은...

https://sir.kr/g5_tip/16115

이걸 보고 만들어 보세요.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,129 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT