[jQuery] input text, select disabled 처리

텍스트 입력 필드나 select 콤보박스의 경우

 

사용자가 입력한 값을 disabled 즉.. 수정을 못하게 비활성화해야 할 일이 발생한다.

 

이럴 경우 jQuery를 이용, 간단하게 해결할 수 있다.

 

 

 

첫번째. readonly 처리.

 

text 필드의 경우 readonly 속성을 주면 수정이 불가능한 읽기 상태가 된다.

 

$("input[name=id]").attr("readonly",true); : name이 id인 input 필드의 속성을 readonly로 변경 처리.

$("input").attr("readonly",true); : 모든 input 필드의 속성을 readonly로 변경 처리.

 

 

두번째. disabled 처리.

 

disabled 처리의 경우 수정 불가 뿐 아니라 form 전송(submit) 역시 안된다.

이를 해결하기 위해 사용자가 id, pass 등의 값을 입력하면 disabled 속성을 줬다가

최종적으로 submit하기 전에 disabled 속성을 풀어주는 방식으로 처리하면 된다.

 

$(".inputArea_kgmb input").attr("disabled","disabled"); : inputArea_kgmb class내의 모든 input 태그를 disabled 처리

$(".inputArea_kgmb select").attr("disabled","disabled"); : inputArea_kgmb class내의 모든 select 태그를 disabled 처리

 

간단히 아래와 같은 함수를 만들어 놓고 사용하면 편할 것이다.

 

function fieldDisabled(){

//입력 필드 disabled

$(".inputArea_kgmb input").attr("disabled","disabled");

$(".inputArea_kgmb select").attr("disabled","disabled");

}

function fieldDisabledCancel(){

//입력 필드 disabled 해제

$(".inputArea_kgmb input").removeAttr("disabled");

$(".inputArea_kgmb select").removeAttr("disabled");

}

[출처] input text, select disabled 처리.|작성자 두비두바

출처 : https://blog.naver.com/incriz/100205085243