[JavaScript] <input>태그의 readonly 없애기

 

버튼을 클릭하거나, 이벤트가 발생했을 때 <input>태그의 readonly 속성을 없애는 방법을 알아보도록 하자.

 

 

<input>태그의 id, class, name 별로 삭제하는 방법에 대해 알아보겠다. 

<input type='text' id='test-id' class='test-class'  name='description' value='this is example' readonly >
<input type='text' class='test-class' name='title' value='I don't want readonly' readonly >
<input type='text' class='test-class' name='tag' value='#readonly' readonly >

 

 

- id가 'test-id'인 input태그의 readonly 속성 제어

document.getElementById('test-id').readonly = false;

 

-class가 'test-class'인 input 태그들의 readonly 속성 제어

 var inputs = document.getElementsByClassName('test-class');

        for (var i = 0; i< inputs.length; i++) {
            inputs[i].readOnly = false;
        }

 

-name이 'tag'인 input 태그들의 readonly 속성 제어 

document.getElementsByName('tag')[0].readOnly = true; //readonly로 만드는 중