:disabled

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

: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:disabled, .css_test textarea:disabled').css('border-color', 'red')">눌러보세용</button>
<button type="button" onclick="$('.css_test input:disabled, .css_test textarea:disabled').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

$( '셀렉터:disabled' )  -  셀렉터에 해당하는 요소중 disabled(비활성) 된것을 찾습니다.
$( '.css_test  input:disabled, .css_test  textarea:disabled' )  -  텍스트 박스와 텍스트에리어를 대상으로 disabled 찾기

예제 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 :disabled').css('border-color', 'red')">눌러보세용</button>
<button type="button" onclick="$('.css_test :disabled').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  :disabled' )  -  클래스명이 css_test 인 요소에서 모든 disabled 찾기

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