asp.net - jQuery 与 ASP.NET WebForms，适合贫穷的旧服务器开发人员

Question

好吧，作为一名服务器开发人员，在客户端呈现的 ASP.NET 页面(基于母版页)上的 Javascript 巫术对我来说似乎有点太多了:-)

我决定尝试使用 jQuery 来处理一些客户端的 UI 元素启用和禁用。

我有两个单选按钮( rbnDoLimit 和 rbnDontLimit )和三个复选框( months12 、 months24 、 months36 ) - 如果我单击 rbnDoLimit ，如果我单击 rbnDontLimit，我想启用所有三个。 ，我喜欢清除并禁用这三个复选框。看起来很简单，对吧？

所以我下载了 jQuery 1.3.2 并将其包含在我的 ASP.NET 3.5 Webform 中 - 工作正常，我可以在 $(document).ready 事件上显示“警报”。

我的两个单选按钮在页面中呈现为:

<input id="ctl01_cphContent_pnlBasicInfo_rbnDontLimit" 
       type="radio" name="ctl01$cphContent$pnlBasicInfo$LimitMVD" 
       value="False" checked="checked" />
<input id="ctl01_cphContent_pnlBasicInfo_rbnDoLimit" 
       type="radio" name="ctl01$cphContent$pnlBasicInfo$LimitMVD" 
       value="True" />

我的三个复选框为:

<span class="dcDetails"><input id="ctl01_cphContent_pnlBasicInfo_months12" 
      type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months12" /></span>
<span class="dcDetails"><input id="ctl01_cphContent_pnlBasicInfo_months24" 
      type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months24" /></span>
<span class="dcDetails"><input id="ctl01_cphContent_pnlBasicInfo_months36" 
      type="checkbox" name="ctl01$cphContent$pnlBasicInfo$months36" /></span>

我用 CSS 类 dcDetails 来装饰它们(它不存在 - 但旨在用于在 jQuery 中选择它们)。我注意到的第一件事是 CSS 类没有应用于我的 <input>元素如预期，但到 <span> <input> 周围的元素……(对我来说第一个谜……)。无论如何......

我的第一次 jQuery 尝试如下所示:

<script type="text/javascript">
    $(document).ready(
        $("#<%= rbnDontLimit.ClientID %>").click(function() {
            $(".dcDetails").attr('disabled','false'); 
        },
        $("#<%= rbnDoLimit.ClientID %>").click(function() {
            $(".dcDetails").attr('disabled','true'); 
        });
</script>

不走运 - 我可以随意单击两个单选按钮 - 什么也没有发生。我认为这是因为 dcDetails CSS 类位于 <span>复选框周围，对吗？

好吧 - 所以它变得有点困惑，但这应该有效!现在我专门选择了三个复选框，按ClientID - 我认为这应该是准确的并获得正确的元素:

<script type="text/javascript">
    $(document).ready(
        $("#<%= rbnDontLimit.ClientID %>").click(function() {
            $("#<%= months12.ClientID %>").attr('disabled','false'); 
            $("#<%= months24.ClientID %>").attr('disabled','false'); 
            $("#<%= months36.ClientID %>").attr('disabled','false'); 
        },
        $("#<%= rbnDoLimit.ClientID %>").click(function() {
            $("#<%= months12.ClientID %>").attr('disabled','true'); 
            $("#<%= months24.ClientID %>").attr('disabled','true'); 
            $("#<%= months36.ClientID %>").attr('disabled','true'); 
        });
</script>

再次，没有运气......

那么我到底错过了什么？所有这些很棒的时髦演示似乎都无法帮助我理解为什么这不起作用 - 甚至一点也不......我想我错过了一些非常基本的东西 - 但我似乎无法弄清楚出来，那是什么! :-)

马克

更新:
还没有太多运气:-(我把我的样本剥离到一个准系统的 HTML 页面 - 但无论我尝试哪种不同的技巧，我总是一遍又一遍地遇到这个错误:

网页错误详细信息

消息:对象不支持此属性或方法专线:3032字符:6代码:0URI:文件:///D:/projects/JQuery1/jquery-1.3.2.js

几乎似乎是 jQuery 内部的一个错误......有什么想法吗？

更新2:
我开始认为我在这里做了一些根本错误的事情......我假设在 document.ready() 函数中，我可以连接两个单选按钮上的单击事件。我在这里错过了什么吗？我是否需要创建一个从单选按钮的客户端“单击”事件调用的函数？无论我想做什么，即使在我的 HTML 编辑器 (TopStyle 4) 中 - 这个错误“对象不支持此属性或方法”一直弹出 - 方便地都不告诉我哪个它引用的对象，也不告诉我不支持哪些属性或方法......

或者我在尝试连接 document.ready() 中的两个单击事件处理函数时做错了什么？

缩小后的纯 HTML 版本可在 http://jquery.bluenose.ch/jquerydemo.html 获取。对于任何可能感兴趣的人 - 我希望能够单击“Do Limit”单选按钮并让它禁用其下面的三个复选框 - 不行:-(

Answer 1

我查看了您的示例，发现存在一些语法问题。

你的例子:

 $(document).ready(
    $('#rbnDontLimit').click(function() {
        $(".dcDetails :input").removeAttr('disabled');
    }),
    $("#rbnDoLimit").click(function() {
        $('.dcDetails :input').attr('disabled', 'true');
    }));

您错过了ready后面的“function (){”及其末尾相应的“}”。单击事件之间的逗号应该是分号。从 jQuery 选择器中删除“:input”。这应该适合你:

   $(document).ready(function() {
        $('#rbnDontLimit').click(function() {
            $(".dcDetails").removeAttr('disabled');
        });
        $("#rbnDoLimit").click(function() {
            $('.dcDetails').attr('disabled', true);
        });
    });