체크박스 도와주세요.
본문
안녕하세요
현재는 채크박스를 비활성화해서 체크되어 있게 보여주고 있는데요
<input type="checkbox" disabled=true value="동의" checked>
이렇게 하니까 색깔이 죽은것처럼 흐리게 나옵니다.
그래서 아래와 같이 변경하고 싶습니다.
기본적으로 체크가 항상 되어 있고
체크를 해제하면 글작성버튼을 누를수 없게하고
억지로 누르게 되면 '체크에 동의해주세요.' 라고
메시지를 보내고 싶습니다.
감사합니다. ㅠ
답변 3
1. custom disabled checkbox
<style>
form label.custom input[type="checkbox"] {
opacity: 0;
}
form label.custom:has(input[type="checkbox"]) {
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M384 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H384zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>');
background-size: 100% 100%;
}
form label.custom:has(input[type="checkbox"]:checked) {
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 80c-8.8 0-16 7.2-16 16V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V96c0-8.8-7.2-16-16-16H64zM0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>');
background-size: 100% 100%;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function () {
$('#frm').on('submit', function (evt) {
if ($('#chk_submit').is(':checked') == false) {
alert('체크에 동의해주세요.');
evt.preventDefault();
}
});
});
</script>
<form id="frm">
<label class="custom"><input id="chk_submit" type="checkbox" value="동의" checked disabled></label>
<button id="btn_submit" type="submit">작성</button>
</form>
2. submit button disabled dinamically
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function () {
$('#chk_submit').on('input', function (evt) {
if ($('#chk_submit').is(':checked') == false) {
$('#btn_submit').attr('disabled', true);
} else {
$('#btn_submit').attr('disabled', false);
}
});
});
</script>
<form id="frm">
<input id="chk_submit" type="checkbox" value="동의" checked>
<button id="btn_submit" type="submit">작성</button>
</form>
네 감사합니다.
2번재걸로 잘 적용하였습니다.
진짜 죄송하지만
체크를 해제 했을때
'동의를 해제하지 말아주세요'
라고 alert을 뜨게 할 수 있을까요?
다시 한번 감사합니다.
if ($('#chk_submit').is(':checked') == false) {
$('#btn_submit').attr('disabled', true);
alert('동의를 해제하지 말아주세요');
} else {
$('#btn_submit').attr('disabled', false);
}
원하시는 답은 아닐 수 있는데 비슷하게요..
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$( document ).ready(function() {
$("input:checkbox").click(function() {
alert('체크에 동의해 주세요.');
return false;
});
});
</script>
<input type="checkbox" value="동의" checked>
===> disabled=true 이건 빼주시고..
색깔이 죽은것처럼 흐리게 나오는 이유는
<input type="checkbox" disabled=true value="동의" checked>
disabled=true 때문에 그런거구요...
기본적으로 체크가 항상 되어 있게 하고 싶으시면
<input type="checkbox" id=all_Chk value="동의" checked>
스크립트 영역에
$(function(){
$('#all_Chk').click(); 하셔서 페이지가 시작되면 무조건 전체 체크박스를 클릭하도록 하시면 되고요..
});
나머지는
배르만 님 소스를 활용하시면 될것같습니다.
