javascript - 如何使用 ASP.NET 复选框和 javascript 切换属性？

Question

以下代码设置一个元素的选定属性，并在复选框选中的值更改时切换该元素。

ASP.NET

<asp:CheckBox CssClass="Cb" RunAt="Server"/>
<asp:TextBox CssClass="Txt" RunAt="Server" ReadOnly="True"/>

HTML

<input class="Cb" type="checkbox"/>
<input class="Txt" type="text" readonly="true"/>

JQUERY

$(".Cb").change(function() {
    $(".Txt").prop("readonly",!this.checked);
});

工作示例

http://jsfiddle.net/gKwbn/

---

一个问题

当使用 ASP.NET asp:checkbox 执行此代码时，结果与使用 input:checkbox 执行代码时的结果不同。

使用 input:checkbox 只读状态切换为:

初始状态

<input class="Txt" type="text" readonly="true"/>

切换

<input class="Txt" type="text"/>
<input class="Txt" type="text" readonly=""/>

使用 asp:checkbox，只读状态切换为:

初始状态

<input class="Txt" type="text" readonly="readonly"/>

切换

<input class="Txt" type="text" readonly=""/>
<input class="Txt" type="text" readonly=""/>

只读理解

以下所有属性都对readonly设置为true有效。

• 只读
• 只读=""
• 只读="真"
• 只读="只读"

---

我的问题

如何在将 asp.net 与 jquery/javascript 一起使用时删除然后切换只读属性？

---

编辑

问题是在使用 asp:checkbox 时，类应用于不正确的元素。

这个

<asp:CheckBox CssClass="Cb" RunAt="Server"/>

在浏览器中呈现为

<span class="Cb"><input id="ctl01" type="checkbox" name="ctl01" /></span>

解决方案

使用 ID 而非类定位 asp:checkbox。

<asp:CheckBox ID="CBID" CssClass="Cb" RunAt="Server"/>

$("#<%= CBID.ClientID %>").change(function() {
    $(".Txt").prop("readonly", this.checked ? "" : "readonly");
});

Answer 1

如果我没有完全误解你的问题，你可以用这个代替......

$(".Cb").change(function() {
    $(".Txt").prop("readonly", this.checked ? "" : "readonly");
});

这会将 readonly 属性设置为 readonly 或为空，具体取决于复选框状态。

Here's a working fiddle

编辑:进一步更新，您可以像这样将类添加到复选框...

<asp:CheckBox class="Cb" RunAt="Server"/>

或者你可以通过ID来引用它...

$("#ctl01").change(function()...

或按名字...

$("input[name=ctl01]").change(function()...

或者因为它在跨度中...

$(".Cb input:checkbox").change(function()...