체크박스 관련 질문입니다.
본문
체크 박스가
선택여부에 따라
다음 버튼을 비활성화 또는 활성화 할려고 합니다.
[ ] 체크1
[ ] 체크2
[ ] 체크3
[ ] 체크4
[ ] 체크5
[ 이전 ] [ 다음 ]
최초에는 다음 버튼이 비활성화 됩니다.
체크된 부분을 1개라도 있으면 다음버튼이 활성화 됩니다.
그런데, 문제는 전체가 해제 되었을때
버튼이 해제가 되어야 합니다.
// 다음버튼
const write_btn = document.getElementById('btn_submit');
// 체크여부
var chk = $(this)[0].checked;
if (chk == true) {
write_btn.disabled = false; // 활성화
} else {
write_btn.disabled = true; // 비활성화
}
조언 구합니다.
답변 3
체크박스 개수만큼 크기를 보고 자바스크립트에서 for문으로 개수크기만 큼 확인해서 체크된게 있다면
chk_cnt값을 증가해서 체크개수를 체크해서 처리하시면 되실듯 합니다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function () {
var btn = $('#write_btn');
var chks = $('.wrap input[type="checkbox"]');
var chk_checked = 0;
function fn_chk_trigger(evt) {
var el = evt.target;
if ($(el).is(':checked') == true) {
chk_checked++;
} else {
chk_checked--;
}
if (chk_checked == 0) {
btn.attr('disabled', true);
} else {
btn.attr('disabled', false);
}
}
chks.click(fn_chk_trigger);
});
</script>
<ul class="wrap">
<li><label><input type="checkbox" id="chk_00" /> 체크1</label></li>
<li><label><input type="checkbox" id="chk_01" /> 체크2</label></li>
<li><label><input type="checkbox" id="chk_02" /> 체크3</label></li>
<li><label><input type="checkbox" id="chk_03" /> 체크4</label></li>
<li><label><input type="checkbox" id="chk_04" /> 체크5</label></li>
<li>
<button type="button" id="prev_btn">이전</button>
<button type="button" id="write_btn" disabled="disabled">다음</button>
</li>
</ul>
감사합니다. ^^~
<div class="checkbox-wrap">
<input type="checkbox" name="" id="" />
<input type="checkbox" name="" id="" />
<input type="checkbox" name="" id="" />
<input type="checkbox" name="" id="" />
<input type="checkbox" name="" id="" />
<input type="checkbox" name="" id="" />
<input type="checkbox" name="" id="" />
</div>
<a href="#">이전</a>
<input type="submit" value="다음" id="btn_submit" disabled="disabled" />
<script>
$(function(){
$(".checkbox-wrap input[type='checkbox']").click(function(){
$("#btn_submit").prop("disabled", $(".checkbox-wrap input[type='checkbox']:checked").length ? 0 : 1);
});
});
</script>
감사합니다. ^^~
답변을 작성하시기 전에 로그인 해주세요.
