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：复选框执行此代码时，结果与使用输入执行代码时的结果不同：复选框。

使用input：复选框，只读状态切换为：

INITIAL STATE

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

TOGGLE

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

使用asp：复选框，只读状态切换为：

INITIAL STATE

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

TOGGLE

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

了解READONLY

以下所有内容都适用于readonly设置为true。

readonly
readonly =“”
readonly =“true”
只读= “只读”

我的问题

如何在使用带有jquery / javascript的asp.net时删除然后切换readonly属性？

EDITS

问题是当使用asp：checkbox时，类被应用于不正确的元素。

此

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

浏览器中的RENDERS

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

解决方案

使用ID而不是类来定位asp：复选框。

<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()...

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

1 个答案: