1. Description
disabled된 모든 Element들을 찾는다.
※ $(":disabled")처럼 사용하는 것보다는 다른 Selector과 같이 사용하는 것이 좋다고 합니다(해당 내용에 대해서는 여기를 참고하거나 「5. Reference」를 참고하세요).
:disabled는 실제로 disabled된 Element소들을 찾는 반면 [disabled]는 disabled속성의 존재유무를 체크한다고 합니다.
:disabled Selector는 disabled속성을 지원하는 다음의 HTMLElement들을 찾기 위해서 사용해야 한다고 합니다.
<button>, <input>, <optgroup>, <option>, <select>, <textarea>, <menuitem>, <fieldset>
※ 자세한 내용은 「4. Reference」를 참고하세요.
2. Example
#1버튼을 클릭하면 disabled된 Element인 Movie, Book을 찾아서 disabled를 해제하면서 체크표시를 집어넣는다.
버튼을 클릭할 때마다 해당 스타일이 토글된다.
User Id :
User Hobby:
Sport Movie Game Book
[HTML Code]
[//HTML Code]
3. Code
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/selector/disabled</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<div name="_1q74-example-root">
<div name="_1q74-example-1">
User Name : <input type="text" name="name" value="This is user name"/>
<br/>
User Id : <input type="text" name="id" value="This is user id"/>
<br/>
User Hobby: <br/>
<input type="checkbox" name="hobby" value="Sport"/> Sport
<input type="checkbox" name="hobby" value="Movie" disabled/> Movie
<input type="checkbox" name="hobby" value="Game"/> Game
<input type="checkbox" name="hobby" value="Book" disabled/> Book
</div>
<div name="_1q74-example-bottom">
<br/>
<button name="btn-find">#1. $("input:checkbox:disabled")</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
const btnFind = $("[name='btn-find']");
const disabledCheckboxes = $("input:checkbox:disabled");
btnFind.click(function() {
disabledCheckboxes.each(function(index, el) {
const element = $(el);
const isDisabled = element.is(":disabled");
if(isDisabled) {
element
.prop({ disabled: false, checked: true })
.css({
"accent-color": "chartreuse",
});
} else {
element.prop({ disabled: true, checked: false });
}
});
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");
textSource.html(specialCharLines.join("<br/>").replaceAll("\t", " "));
</script>
<style>
[name|="_1q74-example"] button
,[name="_1q74-source"] button {
background: lightgray;
border: 5px outset;
min-height: 30px;
}
[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
border: 2px inset;
min-height: 30px;
}
</style>
</body>
</html>4. File
5. Reference
- https://api.jquery.com/disabled-selector/
- XHTML에서는 속성값 없이 속성만 존재할 수는 없기 때문에 XHTML에서는 disabled="disabled"처럼 사용해야 한다고 한다. 하지만, HTML에서는 속성값 없이 disabled만 사용해도 무방하다. 자세한 내용은 아래 링크를 참고하세요.
https://stackoverflow.com/questions/6531738/why-do-we-need-disabled-disabled
Why do we need disabled="disabled"?
It seems to be common consensus that for XHTML attributes which do not require any value, we should repeat the attribute name. E.g. <input disabled> in correct XHTML is <input disabled="di...
stackoverflow.com
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #19】:enabled Selector (0) | 2023.02.22 |
|---|---|
| 【jQuery/Selector #18】Element Selector (“element”) (0) | 2023.02.22 |
| 【jQuery/Selector #16】Descendant Selector (“ancestor descendant”) (0) | 2023.02.22 |
| 【jQuery/Selector #15】:contains() Selector (0) | 2023.02.22 |
| 【jQuery/Selector #14】Class Selector (“.class”) (0) | 2023.02.22 |