๊ฐํน ์๋ฐ์คํฌ๋ฆฝํธ์์ disabled ์์ฑ๊ณผ display ์์ฑ์ ๋ณ๊ฒฝํ ๋ ํท๊ฐ๋ฆฌ๋ ๊ฒฝ์ฐ๊ฐ ์๋ค.
ํ์ํ ๋ ์ฐพ์๋ณด๊ธฐ ์ํด์ ๊ธ์ ์๋๋ค.
JavaSctript๋ก disabled ์์ฑ ํ์ฑํ or ํด์ ํ๊ธฐ
function disabledFalse() {
document.querySelector('#name').disabled = false;
document.querySelector('#email').disabled = false;
document.querySelector('#phone').disabled = false;
document.querySelector('#message').disabled = false;
}
์ ์ฒ๋ผ ๋ด๊ฐ ์ํ๋ ์ ํ์๋ฅผ ์ ํํด์ค ํ .disabled ์์ฑ์ ๋ณ๊ฒฝํด์ฃผ๋ฉด ๋๋ค.
์ ํ์์ ๊ฒฝ์ฐ <input> ํ๊ทธ๋ <button> ํ๊ทธ ๋ฑ์ ๋งํ๋ค.
'#์ ํ์์ id ๊ฐ' => ex) <input id = "name">MyId</input>
class๋ก ์ ํํด์ฃผ๊ณ ์ถ์ผ๋ฉด #id ๋์ .class์ด๋ฆ์ผ๋ก ์ ํํด์ฃผ๋ฉด ๋๋ค.
ex)
<button class="disBtn"> ํ๊ทธ๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ ํํ๋ ค๊ณ ํ๋ฉด document.querySelector('.disBtn')
false => ํ์ฑํ ํด์ : ์ ํ์ด๋ ์์ ๋ถ๊ฐ๋ฅ
true -> ํ์ฑํ: ์ ํ์ด๋ ์์ ๊ฐ๋ฅ
JavaSctript๋ก display ์์ฑ ํ์ฑํ or ํด์ ํ๊ธฐ
display ๋นํ์ฑํ(์ ๋ณด์ด๊ฒ ํ๊ธฐ)
function hideUpdateBtn() {
document.querySelector('#updateBtn').style.display = 'none';
}
disabled์ ๋ง์ฐฌ๊ฐ์ง๋ก ์ ํ์๋ฅผ ์ ํ ํ .style.display = 'none' ์ผ๋ก ๋ฐ๊ฟ์ฃผ๋ฉด ๋นํ์ฑํ ๋๋ค.
disabled์๋ ์กฐ๊ธ ๋ค๋ฅด๊ฒ style ์์ฑ์ ๋ณ๊ฒฝํด์ฃผ๋ ๊ฒ์ด๋ค.
display ํ์ฑํ(๋ณด์ด๊ฒ ํ๊ธฐ)
function showUpdateBtn() {
document.querySelector('#updateBtn').style.display = 'block';
document.querySelector('#updateBtn').style.display = 'inline';
}
ํ์ฑํ์ ๊ฒฝ์ฐ block ํน์ inline์ผ๋ก ๋ณ๊ฒฝํด์ฃผ๋ฉด ๋๋ค.