: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
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
jQuery

$( '.css_test  :enabled' )  -  클래스명이 css_test 인 요소에서 모든 enabled 찾기
$( '.css_test  :not(:disabled)' )  -  이렇게 not 셀렉터를 사용해도 위와 같은 처리를 합니다. (반대의 반대는 긍정과 같은)

jQuery 홈페이지 :enabled API 문서 : http://api.jquery.com/enabled-selector/