Asp.net에서 Checkbox 컨트롤의 Enable 속성을 JavaScript script_javascript 기술을 사용하여 직접 변경할 수 없는 문제에 대한 해결 방법
- WBOY원래의
- 2016-05-16 15:39:171992검색
오늘 직장에서 작은 문제가 발생했습니다. 배경 페이지에서 Checkbox의 활성화 값을 false로 설정했을 때 프런트 엔드 페이지에서 스크립트(chk.disabled = false)를 사용했습니다. 값은 false이고 코드는 다음과 같습니다.
프런트 데스크 코드:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function foo() {
var chk = document.getElementById("<%=chkBlog.ClientID %>");
if (chk.disabled) {
chk.disabled = false;
}
else {
chk.disabled = true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="chkBlog" runat="server" Text="http://owen-zhang.cnblogs.com"></asp:CheckBox>
<asp:Button ID="btnCheck" runat="server" Text="Client check" OnClientClick="foo();return false;" />
</div>
</form>
</body>
</html>
백엔드 코드:
protected void Page_Load(object sender, EventArgs e)
{
this.chkBlog.Enabled = false;
}
왜 이런 일이 발생할까요? 다음과 같이 html의 소스 코드를 살펴보겠습니다.
<span disabled="disabled"> <input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" /> <label for="chkBlog">http://owen-zhang.cnblogs.com</label> </span>
Checkbox 컨트롤의 Enable 속성이 false인 경우 Html에 대한 출력은 예상한 대로 하나의 컨트롤이 아닌 컨트롤(요소) 집합이 되는 것으로 나타났습니다.
옵션 1:
위 코드에서는 chkBlog 컨트롤의 비활성화 속성을 false로 변경했지만 chkBlog 컨트롤의 상위 노드()의 비활성화 속성은 여전히 비활성화되어 있습니다. 이는 우선순위 문제가 있으며 일반적으로 상위 노드의 우선순위가 하위 노드의 우선순위보다 높으므로 상위 노드의 비활성화 값을 다음과 같이 약간 수정해야 합니다. :
<script type="text/javascript">
function foo() {
var chk = document.getElementById("<%=chkBlog.ClientID %>");
if (chk.disabled) {
chk.parentNode.disabled = false;
chk.disabled = false;
}
else {
chk.parentNode.disabled = true;
chk.disabled = true;
}
}
</script>
위에 강조표시된 코드만 추가하세요.
옵션 2:
옵션 1을 사용하는 경우 상위 노드의 비활성화 속성을 변경하는 추가 명령문을 추가해야 합니다. 수정할 곳이 많을 경우 더 번거롭고 일반적인 코드 논리와 맞지 않습니다. 코드가 중복됩니다. 다른 더 간단한 방법이 있나요? 네~, 다음과 같이 배경 코드만 수정하면 됩니다.
protected void Page_Load(object sender, EventArgs e)
{
this.chkBlog.InputAttributes.Add("disabled", "disabled");
}
즉, Checkbox의 Enable 속성을 변경하지 않고, Checkbox가 출력하는 HTML 콘텐츠를 다음과 같이 InputAttributes의 속성 설정을 통해 클라이언트로 변경합니다.
<input id="chkBlog" type="checkbox" name="chkBlog" disabled="disabled" /> <label for="chkBlog">http://owen-zhang.cnblogs.com</label>
이전의 "중복" 상위 노드는 이제 사라졌습니다.