[Javascript] 버튼 활성화/비활성화 하기 (fieldset 포함)

 

Javascript에서 버튼을 활성화/비활성화 하는 방법을 알아봅니다.

 

input 태그의 disabled 속성

HTML의 <input type='button'> 태그를 사용한 버튼을 활성화/비활성화 할때는 

disabled 속성을 이용합니다.

<input type='button' value='활성화1'/>
<input type='button' disabled value='비활성화1'/>
<input type='button' disabled='disabled' value='비활성화2'/>

 

 

 

 

<input type='button' value='활성화1' />

기본적으로 input 태그에 disabled 속성을 따로 명시해 주지 않으면, 버튼은 활성화됩니다.

 

<input type='button' disabled value='비활성화1' />

input 태그에 disabled 속성을 명시해 주면, 버튼이 비활성화 됩니다.

 

<input type='button' disabled='disabled' value='비활성화2'/>

disabled 속성에 어떤 값을 주면, 버튼은 활성화되게 됩니다.

따라서, disabled 속성에 값을 주면서, 버튼을 비활성화 하고 싶다면 'disabled'라고 명시해 주어야 합니다.

 

 

버튼 클릭하여 활성화/비활성화 하기

<input id='target_btn' type='button' value='버튼'/>

<div>'활성화' 또는 '비활성화' 버튼을 클릭하세요</div>
<div>  
  <input type='button' 
         value='활성화' 
         onclick='btnActive()'/>
  <input type='button' 
         value='비활성화' 
         onclick='btnDisabled()'/>
</div>

function btnActive()  {
  const target = document.getElementById('target_btn');
  target.disabled = false;
}

function btnDisabled()  {
  const target = document.getElementById('target_btn');
  target.disabled = true;
}

 

 HTML 

<input type='button' value='활성화' onclick='btnActive()' />

<input type='button' value='비활성화' onclick='btnDisabled()' />

버튼에 onclick 이벤트가 발생하면,

btnActive(), btnDisabled() 함수를 호출합니다.

 

 JAVASCRIPT 

const target = document.getElementById('target_btn');

활성화/비활성화 시킬 버튼 element를 선택합니다.

 

target.disabled = false;

target.disabled = true;

선택된 버튼 element의 disabled 값을 true/false로 설정합니다.

disabled 값이 true이면 버튼이 비활성화 되고, false이면 활성화 됩니다.

 

 

fieldset 전체 버튼 비활성화 하기

<fieldset disabled>
  <legend> Fieldset Button </legend>
  <input id='target_btn_1' type='button' value='버튼1'/>
  <input id='target_btn_2' type='button' value='버튼2'/>
</fieldset>

fieldset 안의 버튼들은 각각의 버튼에 disabled 속성을 주어서 비활성화 할 수도 있지만,

fieldset에 disabled 속성을 주면, 

fieldset 안의 모든 버튼이 비활성화 됩니다.

 

 

버튼 클릭하여 fieldset 안의 모든 버튼 비활성화 하기

<fieldset id='btn_fieldset'>
  <legend> Fieldset Button </legend>
  <input id='target_btn_1' type='button' value='버튼1'/>
  <input id='target_btn_2' type='button' value='버튼2'/>
</fieldset>

<input type='button'
  onclick='fieldsetDisable()'
  value='필드셋 비활성화 하기' />

function fieldsetDisable()  {
  const fieldset = document.getElementById('btn_fieldset');
  fieldset.disabled = true;
}

위 예제는 '필드셋 비활성화 하기' 버튼을 클릭하면,

fieldset 안의 모든 버튼이 비활성화 되는 예제입니다.

 

const fieldset = document.getElementById('btn_fieldset');

비활성화 할 필드셋 element를 선택합니다.

 

fieldset.disabled = true;

선택한 fieldset의 disabled 속성을 true로 바꾸어줍니다.