자바스크립트 축약 방법 조언구합니다.
본문
----------------
ㅁ 경조사 ㅁ 경조사비 ㅁ경조휴가
<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문을 쓰니 되는데요. 이게 최선일까요??? 더 줄일수 있을까요?
반대가 되도록 하면 됩니다
$(".smallchk").attr("disabled", !checkbox.checked);
<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 이 될 경우 그 토탈번호를 추출하는 일반식은...
이걸 보고 만들어 보세요.
이렇게 for문을 사용할수가 있군요... 답변 감사합니다!