jQuery 공작소 : :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_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_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/