jQuery의 :disabled 선택자

jQuery의 :disabled 선택자는 비활성화된(disabled) 요소를 선택하는 데 사용됩니다. 이 선택자를 사용하면 웹 페이지에서 비활성화된 입력 요소를 쉽게 선택하여 조작할 수 있습니다. 다양한 예제를 통해 이 선택자의 활용법을 살펴보겠습니다.

예제 1: 비활성화된 입력 요소에 스타일 적용하기

<input type="text" id="username" disabled>
<input type="email" id="email">
<input type="password" id="password" disabled>

$(":disabled").addClass("disabled-input");

이 예제는 비활성화된 입력 요소를 선택하여 "disabled-input" 클래스를 추가하여 스타일을 적용합니다.

예제 2: 비활성화된 버튼 요소 선택하기

<button disabled>확인</button>
<button>취소</button>
<button disabled>제출</button>

$("button:disabled").addClass("disabled-button");

이 예제는 비활성화된 버튼 요소를 선택하여 "disabled-button" 클래스를 추가합니다.

예제 3: 비활성화된 체크박스 요소 선택하기

<input type="checkbox" id="checkbox1" disabled>
<input type="checkbox" id="checkbox2">
<input type="checkbox" id="checkbox3" disabled>

$("input[type='checkbox']:disabled").addClass("disabled-checkbox");

이 예제는 비활성화된 체크박스 요소를 선택하여 "disabled-checkbox" 클래스를 추가합니다.

jQuery의 :disabled 선택자를 활용하면 웹 페이지에서 비활성화된 요소를 선택하여 스타일이나 동작을 조작할 수 있습니다.