jQuery 공작소 : :enabled
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
:enabled 셀렉터는 활성화 되어있는 폼요소를 찾습니다.
즉 disabled 된 요소의 반대입니다.
disabled 속성이 지정되지 않은 평범한 폼 요소를 생각하면 됩니다.
예제 1
기본 예제
보기
소스
<style type="text/css">
.css_test {
margin : 0 auto;
text-align : center;
width : 500px;
}
.css_test input, .css_test textarea {
border-radius : 5px;
border : 5px solid gray;
margin-top : 10px;
padding : 7px;
}
</style>
<button type="button" onclick="$('.css_test input:enabled, .css_test textarea:enabled').css('border-color', 'red')">눌러보세용</button>
<button type="button" onclick="$('.css_test input:enabled, .css_test textarea:enabled').css('border-color', '')">다시하기</button>
<div class="css_test">
<input type="text" value="disabled" disabled />
<input type="text" value="" /><br>
<textarea disabled>disabled</textarea>
<textarea></textarea>
</div>
.css_test {
margin : 0 auto;
text-align : center;
width : 500px;
}
.css_test input, .css_test textarea {
border-radius : 5px;
border : 5px solid gray;
margin-top : 10px;
padding : 7px;
}
</style>
<button type="button" onclick="$('.css_test input:enabled, .css_test textarea:enabled').css('border-color', 'red')">눌러보세용</button>
<button type="button" onclick="$('.css_test input:enabled, .css_test textarea:enabled').css('border-color', '')">다시하기</button>
<div class="css_test">
<input type="text" value="disabled" disabled />
<input type="text" value="" /><br>
<textarea disabled>disabled</textarea>
<textarea></textarea>
</div>
관련 CSS
jQuery
$( '셀렉터:enabled' ) - 셀렉터에 해당하는 요소중 enabled(활성) 된것을 찾습니다.
$( '.css_test input:enabled, .css_test textarea:enabled' ) - 텍스트 박스와 텍스트에리어를 대상으로 enabled 찾기
예제 2
기본 예제의 셀렉터 개선
보기
소스
<style type="text/css">
.css_test {
margin : 0 auto;
text-align : center;
width : 500px;
}
.css_test input, .css_test textarea {
border-radius : 5px;
border : 5px solid gray;
margin-top : 10px;
padding : 7px;
}
</style>
<button type="button" onclick="$('.css_test :enabled').css('border-color', 'red')">눌러보세용</button>
<button type="button" onclick="$('.css_test :enabled').css('border-color', '')">다시하기</button>
<div class="css_test">
<input type="text" value="disabled" disabled />
<input type="text" value="" /><br>
<textarea disabled>disabled</textarea>
<textarea></textarea>
</div>
.css_test {
margin : 0 auto;
text-align : center;
width : 500px;
}
.css_test input, .css_test textarea {
border-radius : 5px;
border : 5px solid gray;
margin-top : 10px;
padding : 7px;
}
</style>
<button type="button" onclick="$('.css_test :enabled').css('border-color', 'red')">눌러보세용</button>
<button type="button" onclick="$('.css_test :enabled').css('border-color', '')">다시하기</button>
<div class="css_test">
<input type="text" value="disabled" disabled />
<input type="text" value="" /><br>
<textarea disabled>disabled</textarea>
<textarea></textarea>
</div>
관련 CSS
jQuery
$( '.css_test :enabled' ) - 클래스명이 css_test 인 요소에서 모든 enabled 찾기
$( '.css_test :not(:disabled)' ) - 이렇게 not 셀렉터를 사용해도 위와 같은 처리를 합니다. (반대의 반대는 긍정과 같은)
jQuery 홈페이지 :enabled API 문서 : http://api.jquery.com/enabled-selector/