자바스크립트 질문있습니다.

본문 바로가기

자바스크립트 질문있습니다.

작성일 2023.12.05댓글 3건
    게시물 수정 , 삭제는 로그인 필요

<div class="checkbox-wrap">
<input type="checkbox" class="checkbox">
</div>

<div class="selectbox-wrap">
<select class="select select1">
<option>A</option>
<option>B</option>
<option>C</option>
</select>

<select class="select select2">
<option>D</option>
<option>E</option>
<option>F</option>
</select>
</div>

이런식으로 구성이 되어 있을 때 checkbox가 체크가 되기 전에는 selectbox가 disabled가 되어 있고 checkbox에 체크가 되면 selectbox가 활성화되게 하고싶은데 자바스크립트를 어떻게 만들어야하나요?

도움구합니다.



profile_image 익명 작성일 -

JQuery가 아닌 점 양해부탁드립니다.

​

const checkbox = document.querySelector("checkbox-wrap input.checkbox"); // 체크박스를 불러옴 const selectboxes = document.querySelectorAll("select.select"); // 선택상자를 모두 불러옴 function setSelectDisabled(disabled){ selectboxes.forEach(_=>{_.disabled = disabled}) } // 부울값에 따라 모든 선택상자에 disabled를 일괄 설정함. setSelectDisabled(checkbox.checked); //처음 체크박스 상태에 맞게 초기 호출함. checkbox.addEventListener("change",(evt)=>{ setSelectDisabled(!evt.target.checked); }) // 체크박스에 change 이벤트를 적용, setSelectDisabled 함수에 이벤트타깃의 checked를 부정 연산자로 뒤집어서 전달함. // 체크 해제리면 disabled가 걸리고, 체크되면 disabled가 풀립니다.

안 좋은 습관을 좀 말씀드리자면 다음이 있겠습니다.

​

1. 무의미한 class 사용. 이미 태그 이름이 select인데 굳이 select라는 클래스 명을 쓸 이유가 없습니다. 요소를 구분하기 위해 class를 사용하는거라면 어떤 기준으로 class를 지정했는지 생각하고 이름을 지어야 합니다.

2. input 태그에 id, name 없음. 설령 필요가 없더라고 모든 input태그는 id와 name이 있는게 바람직한 표준입니다. 꼭 넣어주세요. 또한 label태그는 input태그와 함꼐 항상 짝입니다. input태그가 눈에 보이지 않길 원한다면 aira-label로 체크박스에 레이블을 제공해야 합니다.

profile_image 익명 작성일 -

전체 코드 전달드립니다.

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>checkbox</title> </head> <body> <div class="checkbox-wrap"> <input type="checkbox" class="checkbox"> </div> <div class="selectbox-wrap"> <select class="select select1"> <option>A</option> <option>B</option> <option>C</option> </select> <select class="select select2"> <option>D</option> <option>E</option> <option>F</option> </select> </div> <script> const checkboxEl = document.querySelector('.checkbox-wrap .checkbox'); const selectEls = document.querySelectorAll('.selectbox-wrap .select'); chkFn(checkboxEl.checked); checkboxEl.addEventListener('change',()=>chkFn(checkboxEl.checked)); function chkFn(chk){selectEls.forEach(t=>t.disabled = !chk);} </script> </body> </html>

-----------------------------

TMI로 저는 윗분과 의견이 조금 다르다고 생각합니다.

태그명이 클래스 select 랑 같아도 클래스로 별도로 select로 지정해서 사용하는 편이 좋습니다.

단순 스타일링을 위해서 클래스명을 사용하거나 스크립트로 해당요소를 선택할때 추후에 추가로 다른 select 태그가 생길수가 있기에 가급적 태그자체로 사용하기보단 별도의 클래스로 사용하는 편이 좋습니다.

profile_image 익명 작성일 -

checkbox가 체크되었는지를 확인하고, 그에 따라 selectbox의 disabled 속성을 변경하는 함수를 작성하면 됩니다. 예를 들어, 다음과 같은 코드를 사용할 수 있습니다.

// checkbox와 selectbox의 id를 가져옵니다.var checkbox = document.getElementById("checkbox");var select1 = document.getElementById("select1");var select2 = document.getElementById("select2");// checkbox의 상태가 바뀔 때마다 실행할 함수를 정의합니다.function toggleSelectbox() { // checkbox가 체크되었다면 if (checkbox.checked) { // selectbox를 활성화합니다. select1.disabled = false; select2.disabled = false; } else { // checkbox가 체크되지 않았다면 // selectbox를 비활성화합니다. select1.disabled = true; select2.disabled = true; }}// checkbox에 이벤트 리스너를 추가합니다.// checkbox의 상태가 바뀔 때마다 toggleSelectbox 함수를 호출합니다.checkbox.addEventListener("change", toggleSelectbox);

​

이 코드를 사용하려면, checkbox와 selectbox의 id를 각각 “checkbox”, “select1”, "select2"로 설정해야 합니다. 다른 id를 사용하고 싶다면, 코드에서 id를 변경해주면 됩니다.

​

이 코드는 https://m.blog.naver.com/pjj256/221622703922과 https://hianna.tistory.com/703를 참고하여 작성했습니다.

​

이렇게 하면, checkbox가 체크되기 전에는 selectbox가 disabled가 되어 있고, checkbox에 체크가 되면 selectbox가 활성화되는 것을 확인할 수 있습니다.

​

^^ 답변확정 부탑드립니다.^^

연관된 질문 답변 리스트

자바스크립트 질문있습니다.

https://codepen.io/lbh6154/pen/bGjWvqE 여기서 select 효과가 각각 들어갔으면 하는데 자바스크립트를 어떻게 수정해야하나요? 스크립트를...

자바스크립트 질문있습니다.

... 자바스크립트를 써서 메모장이랑 연결할 수 있는 방법 없을까요... 방법이 있습니다. 스크립트: (function () { var textFile = null...

자바스크립트 질문있습니다.

입력 폼에서 데이터를 입력을 하다가 새로 고침을 하게 되면 alert창이 뜨고 예/아니오 선택하는 자바스크립트를 만들고 싶은데요. '예'를 선택하게 되면 홈페이지가 새로...

자바스크립트 질문있습니다.

... 박스가 있습니다. 근데 상단 전체 체크 박스를 선택하면 상단에... 하려면 자바스크립트를 어떻게 수정을 해야하나요? class를...

자바스크립트 질문있습니다.

... disabled가 되어 있고 checkbox에 체크가 되면 selectbox가 활성화되게 하고싶은데 자바스크립트를 어떻게 만들어야하나요? 도움구합니다. 전체 코드 전달드립니다....

checkbox, js, html

input radio 자바스크립트 질문있습니다.

123 일 때 value값이 Y일 때는 box클래스가 display: block이고 value값이 N일 때는 display: none 이게하는 자바스크립트를 만들고 싶은데 어떻게 입력해야하나요? radio...

자바스크립트 질문 있습니다!

... realName} </c:forEach> 와 같고 자바스크립트는 var file_href = document.... getElementById("IDX") 방식은 쓰지 못하고 있습니다! 답변 부탁드립니다! id는...

자바스크립트 질문있습니다.

... 해당 자바스크립트로 버튼 하나를 컨트롤 하고 있는데요. 여기서 check클릭하게 되면 frmbtn에 css와 disabled가 빠지게 되는데 한번 더...

자바스크립트 질문있습니다.

... 이런 형식의 자바스크립트를 짜서 5개의 input박스의 합이 1이상이 아니면 alert 창이 뜨게 만들고 싶습니다. 어떻게 자바스크립트를 입력...