728x90
* 결과
* 간단한 설명
요소의 disabled 속성이 true 가 된다면 해당 요소가 비활성화됩니다.
반대로 요소의 disabled 속성이 false가 된다면 해당 요소가 활성화됩니다.
다양한 요소에 적용해볼 수 있습니다 :)
* 전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div>
<button id="A" onclick="alert('A 버튼입니다.')">A버튼</button>
<button onclick="A_change_status(this)">A버튼을 비활성화하기</button>
</div>
<hr>
<div>
<textarea name="" id="B" cols="30" rows="10" onclick="alert('B textarea를입니다.')">B textarea</textarea>
<button onclick="B_change_status(this)">B textarea를 비활성화하기</button>
</div>
</body>
<script>
const A_btn = document.getElementById("A");
const B_textarea = document.getElementById("B");
function A_change_status(btn){
if(A_btn.disabled){
A_btn.disabled = false;
btn.innerText = "A버튼을 비활성화하기";
}
else{
A_btn.disabled = true;
btn.innerText = "A버튼을 활성화하기";
}
}
function B_change_status(btn){
if(B_textarea.disabled){
B_textarea.disabled = false;
btn.innerText = "B textarea를 비활성화하기";
}
else{
B_textarea.disabled = true;
btn.innerText = "B textarea를 활성화하기";
}
}
</script>
</html>
'JavaScript' 카테고리의 다른 글
| [Javascript] 작업 시간 측정하기 (0) | 2022.08.05 |
|---|---|
| [javascript] url 형식 체크하기 (0) | 2022.07.25 |
| [JavaScript] find 함수에 대해 알아보고 네이버지도 api 에서 사용해보기 (0) | 2022.07.21 |
| [JavaScript] Video.js 로 m3u8 파일 재생하기 (0) | 2022.07.16 |
| [javascript] 숫자 입력하면 전화번호 형식으로 표현해주기 (0) | 2022.07.10 |
