728x90
๋ฐ์ํ
๊ฒฝ๋งค ์๋น์ค ํ๋ก์ ํธ๋ฅผ ํ๋ค๋ณด๋ ์ํฉ์ ๋ฐ๋ฅธ ๋ฒํผ ๋นํ์ฑํ๊ฐ ํ์ํ์๊ณ , ์ด๋ฅผ ์ํด ๊ธฐ๋ณธ์ ์ธ ๋ฒํผ ๋นํ์ฑํ ๋ฐฉ๋ฒ์ ๋ํด ์์๋ณด์๋ค.
input ํ๊ทธ ๋ด์ disabled ์์ฑ ์ฌ์ฉ
See the Pen button disabled by SeongHo-C (@seongho-c) on CodePen.
<input type="button" value="ํ์ฑํ">
- input ํ๊ทธ์ disabled ์์ฑ์ ๋ฐ๋ก ๋ช ์ํ์ง ์์ผ๋ฉด, ๋ฒํผ์ ๊ธฐ๋ณธ์ ์ผ๋ก ํ์ฑํ ์ํ๊ฐ ๋๋ค.
<input type="button" value="๋นํ์ฑํ" disabled>
- input ํ๊ทธ์ disabled ์์ฑ์ ๋ช ์ํด ์ฃผ๋ฉด, ๋ฒํผ์ ๋นํ์ฑํ ์ํ๊ฐ ๋๋ค.
ํ์ฑํ/๋นํ์ฑํ ๋ฒํผ์ ํด๋ฆญํ์ฌ ๋ฒํผ์ ์ํ ๋ณ๊ฒฝ
See the Pen button click disabled by SeongHo-C (@seongho-c) on CodePen.
[JAVASCRIPT]
const target = document.getElementById('target_btn');
- ํ์ฑํ/๋นํ์ฑํ ์ํฌ DOM Element๋ฅผ target ๋ณ์์ ์ ์ฅํ๋ค.
btnActive.addEventListener('click', () => target.disabled = false);
btnDisabled.addEventListener('click', () => target.disabled = true);
- ํ์ฑํ/๋นํ์ฑํ ๋ฒํผ์ ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด ์ฝ๋ฐฑํจ์๋ฅผ ํธ์ถํ๋ค.
- ์ ํ๋ DOM Element์ disabled ๊ฐ์ false/true๋ก ์ค์ ํ๋ค.
- disabled ๊ฐ์ด false์ด๋ฉด ๋ฒํผ์ด ํ์ฑํ ๋๊ณ , true์ด๋ฉด ๋ฒํผ์ด ๋นํ์ฑํ๋๋ค.
์ง์ ์ฌ์ฉํ ์
// ํ๊ธฐ์์ฑ ๋ฒํผ ๋นํ์ฑํํ๊ธฐ
reviewWriteDisabled();
function reviewWriteDisabled() {
const product = data.data;
for (let i = 0; i < data.count; i++) {
const target = document.getElementById('reviewWrite' + i);
// ๋์ฐฐ์์ Id์ ๋ก๊ทธ์ธํ ์
์ฐฐ์์ Id๊ฐ ๊ฐ์ ๊ฒฝ์ฐ
if (product[i].successBidderId == memberId) {
// ๋์ฐฐ๋ ์ํ์ ๋ํ ํ๊ธฐ๋ฅผ ์ด๋ฏธ ์์ฑํ ๊ฒฝ์ฐ
if (product[i].reviewYn == 'Y') {
target.disabled = true;
} else {
target.disabled = false;
}
}
}
}
const target = document.getElementById('reviewWrite' + i);
- ํ์ฑํ/๋นํ์ฑํ ์ํฌ DOM Element๋ฅผ target ๋ณ์์ ์ ์ฅํ๋ค.
target.disabled = true;
- ๋์ฐฐ๋ ์ํ์ ๋ํ ํ๊ธฐ๋ฅผ ์ด๋ฏธ ์์ฑํ ๊ฒฝ์ฐ ํ๊ธฐ ์์ฑ ๋ฒํผ์ด ๋นํ์ฑํ ์ํ๊ฐ ๋๋ค.
target.disabled = false;
- ๋์ฐฐ๋ ์ํ์ ๋ํ ํ๊ธฐ๋ฅผ ์์ฑํ์ง ์์ ๊ฒฝ์ฐ ํ๊ธฐ ์์ฑ ๋ฒํผ์ด ํ์ฑํ ์ํ๊ฐ ๋๋ค.
'Frontend > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[JavaScript] ์ค์ฝํ(Scope)๋ ๋ฌด์์ธ๊ฐ? (0) | 2022.09.05 |
---|---|
[JavaScript] ํด๋ก์ ๋ ๋ฌด์์ธ๊ฐ? (0) | 2022.09.02 |
[JavaScript] ๋ฌธ์์ด ์นํ( replace(), split().join() ) (0) | 2022.08.19 |
[JavaScript] ํ์ฌ ์๊ฐ๊ณผ ๋น๊ตํด ๋จ์ ์๊ฐ ๊ตฌํ๊ธฐ(์ผ, ์, ๋ถ, ์ด) (2) | 2022.05.02 |
[JAVASCRIPT] Fetch API & FormData๋ฅผ ์ด์ฉํ ๋ค์คํ์ผ ์ ๋ก๋ (0) | 2022.04.30 |