2

好的，作为服务器开发人员，在客户端呈现的 ASP.NET 页面（基于母版页）上的这个 Javascript 巫毒对我来说有点太多了，看起来 :-)

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

我有两个单选按钮（rbnDoLimit和rbnDontLimit）和三个复选框（months12、months24、months36）——如果我点击rbnDoLimit，我想启用所有三个，如果我点击rbnDontLimit，我想清除和禁用这三个复选框。看起来很简单，对吧？

所以我下载了 jQuery 1.3.2 并将其包含在我的 ASP.NET 3.5 网络表单中——工作正常，我可以在 $(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 中选择它们）。<input>我注意到的第一件事是 CSS 类没有按预期应用于我的元素，而是应用于......<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>

没有运气 - 我可以随意点击两个单选按钮 - 没有任何反应。我认为这是因为dcDetailsCSS 类位于<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 代码：0 URI：file:///D:/projects/JQuery1/jquery-1.3.2.js

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

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

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

任何可能感兴趣的人都可以在http://jquery.bluenose.ch/jquerydemo.html上找到按比例缩小的纯 HTML 版本- 我希望能够单击“Do Limit”单选按钮并让它禁用它下面的三个复选框 - 不行:-(

4

4 回答 4

3

我看了你的例子，有一些语法问题。

你的例子：

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

您在准备好之后缺少“函数（）{”，最后缺少相应的“}”。点击事件之间的逗号应该是分号。从 jQuery 选择器中删除 ":input"。这应该适合你：

   $(document).ready(function() {
        $('#rbnDontLimit').click(function() {
            $(".dcDetails").removeAttr('disabled');
        });
        $("#rbnDoLimit").click(function() {
            $('.dcDetails').attr('disabled', true);
        });
    });
于 2009-08-20T17:51:24.717 回答
1

尝试改变：

$("#<%= months12.ClientID %>").attr('disabled','false')

到：

$("#<%= months12.ClientID %>").attr('disabled','disabled')

和

$("#<%= months12.ClientID %>").attr('disabled','true')

到：

$("#<%= months12.ClientID %>").attr('disabled','')
于 2009-08-20T15:28:34.817 回答
0

使用 Kieron 的答案，然后......

$("#<%= rbnDontLimit.ClientID %>").click(function() {
            $(".dcDetails").attr('disabled','false'); 
}

也可以改为：

$("#<%= rbnDontLimit.ClientID %>").click(function() {
            $(".dcDetails > :checkbox").attr('disabled','disabled'); 
}
于 2009-08-20T15:32:52.483 回答
0

要禁用复选框（任何控件），我使用以下

$("#chkSomething").attr("disabled", "true")

要启用复选框（任何控件），我使用以下

$("#chkSomething").removeAttr("disabled")

要回答你的问题，

<script type="text/javascript">
    $(document).ready(
        $("#<%= rbnDontLimit.ClientID %>").click(function() {
            $("#<%= months12.ClientID %>").removeAttr("disabled"); 
            $("#<%= months24.ClientID %>").removeAttr("disabled"); 
            $("#<%= months36.ClientID %>").removeAttr("disabled"); 
        },
        $("#<%= rbnDoLimit.ClientID %>").click(function() {
            $("#<%= months12.ClientID %>").attr('disabled','true'); 
            $("#<%= months24.ClientID %>").attr('disabled','true'); 
            $("#<%= months36.ClientID %>").attr('disabled','true'); 
        });
</script>
于 2009-08-20T16:38:12.523 回答