[JavaScript] input 태그 disabled 속성을 이용한 버튼 활성화/비활성화

경매 서비스 프로젝트를 하다보니 상황에 따른 버튼 비활성화가 필요하였고, 이를 위해 기본적인 버튼 비활성화 방법에 대해 알아보았다.

 

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;

• 낙찰된 상품에 대한 후기를 작성하지 않은 경우 후기 작성 버튼이 활성화 상태가 된다.