2

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

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

我有两个单选按钮(rbnDoLimitrbnDontLimit)和三个复选框(months12months24months36)——如果我点击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 回答