반응형
html select 태그에 readonly는 적용되지 않지만 늘 readonly 속성을 주고 제대로 작동 안해서 구글링을 합니다.
select에 readonly 효과 주기 위해서는 disabled 속성을 넣어주어야 합니다.
<select id="lang" disabled>
<option value=""></option>
<option value="JAVA">Java</option>
<option value="C++">C++</option>
<option value="C#">C#</option>
</select>
동적으로 사용/미사용을 해야 하는데 jQuery를 이용한 코드는 아래와 같습니다.
disabled 속성을 제거하면 사용 할 수 있습니다.
$("#lang").removeAttr("disabled");
disabled 속성을 넣으면 사용 할 수 없습니다.
$("#lang").attr("disabled","disabled");
전체 소스
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function enableSelect(){
$("#lang").removeAttr("disabled");
}
function disableSelect(){
$("#lang").attr("disabled","disabled");
}
</script>
</head>
<body>
<select id="lang" disabled>
<option value=""></option>
<option value="JAVA">Java</option>
<option value="C++">C++</option>
<option value="C#">C#</option>
</select>
<p>
<input type="button" value="사용" onClick="enableSelect()"/>
<p>
<input type="button" value="미사용" onClick="disableSelect()"/>
</body>
</html>반응형
'jQuery' 카테고리의 다른 글
| jQeury isNumeric 함수를 이용한 숫자 여부 판단 (0) | 2021.08.10 |
|---|---|
| JQuery AJAX 사용 시 한글 깨지는 현상 해결방법 (0) | 2021.07.22 |
| jQeury 기본 Syntax (0) | 2017.03.21 |
| jQuery 시작하기. (0) | 2017.03.21 |
댓글