[JavaScrit] checkbox / radio readonly 설정하기

readonly 설정

input의 경우 아래와 같이 readonly를 간단하게 처리할 수 있다.

<input type="text" name="" readonly>

그러나 checkbox나 radio버튼은 readonly속성이 적용되지 않는다.

그래서 onclick을 직접 적용하여 readonly을 설정하거나 스크립트로 설정을 해주어야 한다.

예시 1

input에 return false를 적용

// checkbox
<input type="checkbox" onclick="return false;" checked>
// radio
<input type="radio" onclick="return false;" checked>

예시 2

input에 return false를 스크립트로 일괄 적용

// checkbox
<input type="checkbox" class="readonly" checked>
// radio
<input type="radio" class="readonly" checked>

let ipt = document.querySelectorAll('input.readonly');
for(let i = 0; i < ipt.length; i++) {
  ipt[i].setAttribute('onclick', 'return false');
}

결과물

체크박스가 해제되지 않는다.

체크박스가 해제 된다.

라디오 버튼이 변경되지 않는다.

라디오 버튼이 변경되지 않는다.