자바스크립트 축약 방법 조언구합니다. 채택완료
----------------
ㅁ 경조사 ㅁ 경조사비 ㅁ경조휴가
<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);
}
답변에 대한 댓글 3개
if($("#t").is(":checked")){
$("#t1").removeAttr("disabled", false);
}else{
$("#t1").attr("disabled", true);
}
}
이렇게 if문을 쓰니 되는데요. 이게 최선일까요??? 더 줄일수 있을까요?
$(".smallchk").attr("disabled", !checkbox.checked);
댓글을 작성하려면 로그인이 필요합니다.
</p>
<p><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="경조휴가">경조휴가</p>
<p>
<script>
inputTotal = 4;
my.onclick = function() {
for (i = 1; i <= inputTotal; i++) window["incheck" + i].disabled = !this.checked;
}
my.onclick();
</script></p>
<p>
여기서 inputTotal 이 4가 아니라 5 또는 100 이 될 경우 그 토탈번호를 추출하는 일반식은...
이걸 보고 만들어 보세요.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
하지만 이렇게 하니 거꾸로 작동을 하네요. 메인 체크박스를 체크하면 disabled 되어 있던 체크박스가 해제가 되어야 하는데, 반대가 되네요.
그래서 attr 대신 removeattr 을 사용해보니,,, 해제는 되는데, 다시 disabled가 되지 않네요...