1

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

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"/>

查询

$(".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");
});
4

1 回答 1

3

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

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

这将根据复选框状态将readonly属性设置为要么或空。readonly

这是一个工作小提琴

编辑：除了您的更新，您可以像这样将类添加到复选框中......

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

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

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

或按名字...

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

或者事实上它在跨度中......

$(".Cb input:checkbox").change(function()...
于 2013-10-01T09:53:26.773 回答