반응형
disabled
모든 포커스를 받을 수 있는 요소(선택, 클릭, 입력 등)를 비활성화 합니다.
▶ 구문
input요소.disabled = true //비활성
input요소.disabled = false //활성
<input type="" disabled>
▶ 예시
버튼을 클릭하면 텍스트 입력과 체크박스 요소를 비활성화 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const testTag = document.querySelector('#id_input')
const btnTag = document.querySelector('#id_btn')
const ckbTag = document.querySelector('#id_ckb')
btnTag.addEventListener('click', (event) => {
testTag.disabled = true;
ckbTag.disabled = true;
})
})
</script>
</head>
<body>
<fieldset>
<legend>disabled</legend>
<label for="id_input">텍스트 입력 : </label><input type="text" placeholder="TEXT INPUT" id="id_input"> <br>
<label for="id_btn">버튼 클릭 : </label><input type="button" value="BUTTON" id="id_btn"> <br>
<label for="id_ckb">체크박스 클릭 : </label><input type="checkbox" name="ckb" id="id_ckb"><br>
</fieldset>
</body>
</html>
예제
이름, 주소, 우편번호를 입력할 수 있는 배송지와 청구지를 생성하시오.
- '배송지와 동일' 이라는 체크박스를 청구지에 생성하고 체크시 배송지의 이름, 주소, 우편번호가 청구지 입력 텍스트에 자동으로 입력되며 더 이상 입력할 수 없는 상태로 만드시오.
▶ 해법
1. body에 form을 생성합니다.
<body>
<fieldset>
<legend>배송지</legend>
<input type="text" placeholder="이름" id="id_ip_name"> <br>
<input type="text" placeholder="주소" id="id_ip_ads"> <br>
<input type="text" placeholder="우편번호" id="id_ip_ptcode">
</fieldset> <br>
<fieldset>
<legend>청구지</legend>
<label for="id_ckbox">배송지와 동일 : </label> <input type="checkbox" id="id_ckbox"> <br>
<input type="text" placeholder="이름" id="id_ip_name2"> <br>
<input type="text" placeholder="주소" id="id_ip_ads2"> <br>
<input type="text" placeholder="우편번호" id="id_ip_ptcode2">
</fieldset>
</body>
2. document에 body에 요소들을 가져옵니다.
document.addEventListener('DOMContentLoaded', () => {
ipNameTag1 = document.querySelector('#id_ip_name')
ipAdsTag1 = document.querySelector('#id_ip_ads')
ipPtcodeTag1 = document.querySelector('#id_ip_ptcode')
ckbTag = document.querySelector('#id_ckbox')
ipNameTag2 = document.querySelector('#id_ip_name2')
ipAdsTag2 = document.querySelector('#id_ip_ads2')
ipPtcodeTag2 = document.querySelector('#id_ip_ptcode2')
})
3. 체크박스 클릭 이벤트를 생성합니다.
- 체크박스 클릭시 배송지의 입력값을 청구지로 가져오며 입력을 비활성화 합니다.
ckbTag.addEventListener('click', (event) => {
if(ckbTag.checked === true) {
ipNameTag2.value = ipNameTag1.value
ipAdsTag2.value = ipAdsTag1.value
ipPtcodeTag2.value = ipPtcodeTag1.value
ipNameTag2.disabled = true;
ipAdsTag2.disabled = true;
ipPtcodeTag2.disabled = true;
}
else {
ipNameTag2.disabled = false;
ipAdsTag2.disabled = false;
ipPtcodeTag2.disabled = false;
}
})
▶결과
반응형
'JavaScript' 카테고리의 다른 글
| [Python] Segmentation (0) | 2022.10.06 |
|---|---|
| [JavaScript] 확률 뽑기 (0) | 2022.05.04 |
| [JavaScript] UI 설계 예제 (0) | 2022.05.04 |
| [JavaScript] checkbox 전체 설정하기 (0) | 2022.05.02 |
| [JavaScript] 과일 상자 추가하기 (table 추가 예제) (0) | 2022.05.02 |