답변 3개
채택된 답변
+20 포인트
1년 전
1. custom disabled checkbox
</p>
<p><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="<a href="http://www.w3.org/2000/svg"" target="_blank" rel="noopener noreferrer">http://www.w3.org/2000/svg"</a> viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - <a href="https://fontawesome.com" target="_blank" rel="noopener noreferrer">https://fontawesome.com</a> License - <a href="https://fontawesome.com/license/free" target="_blank" rel="noopener noreferrer">https://fontawesome.com/license/free</a> 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="<a href="http://www.w3.org/2000/svg"" target="_blank" rel="noopener noreferrer">http://www.w3.org/2000/svg"</a> viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - <a href="https://fontawesome.com" target="_blank" rel="noopener noreferrer">https://fontawesome.com</a> License - <a href="https://fontawesome.com/license/free" target="_blank" rel="noopener noreferrer">https://fontawesome.com/license/free</a> 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></p>
<p> </p>
<p><script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a>
<script>
$(function () {
$('#frm').on('submit', function (evt) {
if ($('#chk_submit').is(':checked') == false) {
alert('체크에 동의해주세요.');
evt.preventDefault();
}
});
});
</script></p>
<p> </p>
<p><form id="frm">
<label class="custom"><input id="chk_submit" type="checkbox" value="동의" checked disabled></label>
<button id="btn_submit" type="submit">작성</button>
</form></p>
<p>
2. submit button disabled dinamically
</p>
<p><script src="<a href="http://code.jquery.com/jquery-latest.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.min.js"></script></a>
<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></p>
<p> </p>
<p><form id="frm">
<input id="chk_submit" type="checkbox" value="동의" checked>
<button id="btn_submit" type="submit">작성</button>
</form></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
코니팡
1년 전
�
배르만
1년 전
[code]
if ($('#chk_submit').is(':checked') == false) {
$('#btn_submit').attr('disabled', true);
alert('동의를 해제하지 말아주세요');
} else {
$('#btn_submit').attr('disabled', false);
}
[/code]
if ($('#chk_submit').is(':checked') == false) {
$('#btn_submit').attr('disabled', true);
alert('동의를 해제하지 말아주세요');
} else {
$('#btn_submit').attr('disabled', false);
}
[/code]
댓글을 작성하려면 로그인이 필요합니다.
1년 전
색깔이 죽은것처럼 흐리게 나오는 이유는
disabled=true value="동의" checked>
disabled=true 때문에 그런거구요...
기본적으로 체크가 항상 되어 있게 하고 싶으시면
id=all_Chk value="동의" checked>
스크립트 영역에
$(function(){
$('#all_Chk').click(); 하셔서 페이지가 시작되면 무조건 전체 체크박스를 클릭하도록 하시면 되고요..
});
나머지는
배르만 님 소스를 활용하시면 될것같습니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
1년 전
원하시는 답은 아닐 수 있는데 비슷하게요..
</p>
<p><script src="<a href="https://code.jquery.com/jquery-3.7.1.min.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.7.1.min.js"></script></a></p>
<p><script></p>
<p>$( document ).ready(function() {</p>
<p> $("input:checkbox").click(function() {</p>
<p> alert('체크에 동의해 주세요.');</p>
<p> return false;</p>
<p> });</p>
<p>});</p>
<p></script></p>
<p>
===> disabled=true 이건 빼주시고..
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
2번재걸로 잘 적용하였습니다.
진짜 죄송하지만
체크를 해제 했을때
'동의를 해제하지 말아주세요'
라고 alert을 뜨게 할 수 있을까요?
다시 한번 감사합니다.