将<input>元素的显示文字设置为“变灰”

问题描述：

鉴于此HTML - 如何扩展我的jQuery以使<input>元素显示的文本在我选择“不限制”单选按钮时显示为“变暗”或灰显？将<input>元素的显示文字设置为“变灰”

在这里看到的样品：http://jquery.bluenose.ch/jquerydemo.html

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

<body class="contentBody"> 
    <input id="rbnDontLimit" type="radio" name="limitChoice">Do not Limit</input> 

    <input id="months12" class="dcDetails" type="checkbox" name="choiceMonths">12 months</input> 
</body>

眼下，点击“不限制”按钮，将正确禁用复选框（感谢，毛重，为您在这一个所有帮助！），但文本仍然像以前一样。

是否有另一个聪明的jQuery/CSS技巧可用于使文本显示为灰色？

马克

那是因为你不允许像这样在元素内有文本。 s是自动关闭的，所以它必须是： 12 months看我更新回答如下。 – 2009-08-20 19:07:05

乔希：谢谢！我在这里每小时都在学习一些东西！ :-) – 2009-08-20 19:08:57

答

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#rbnDontLimit").click(function() { 
     $('.dcDetails').attr('checked', false).attr('disabled', true).each(function(){ 
      $('label[for=' + $(this).attr('id') + ']').css('color', 'gray'); 
     }); 
    }); 
}); 
</script>

更改你想gray到任何灰色十岁上下的颜色。

或者你可以去清洁：

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#rbnDontLimit").click(function() { 
     $('.dcDetails').attr('checked', false).attr('disabled', true).each(function(){ 
      $('label[for=' + $(this).attr('id') + ']').addClass('disabled'); 
     }); 
    }); 
}); 
</script>

并添加CSS定义：当你点击单选

.disabled { color: gray; }

嗯....这似乎没有做任何事情:-(我甚至试图将它设置为“红色”只是为了绝对确定！:-)没有变化...... – 2009-08-20 18:50:56

同样“addClass”调用 - 文本根本不会改变外观:-( – 2009-08-20 18:56:11

）对不起，我没有完全阅读您的HTML。将颜色属性添加到复选框本身毫无意义，您需要将“12个月”文字在这样的：12个月（另外，它应该是，不）我在我的答案更新的代码应该正常工作，如果你申请。一个到我解释的文字 – 2009-08-20 19:00:34

答

只需拨动一类 - 一类颜色设置为＃333333和其他#CCCCCC

答

如果您使用ASP.NET控件，请确保在编写JavaScript时使用按钮控件的ClientID属性。这将使您无需处理内容占位符中的损坏ID。

例ASP.NET标记在ContentPlaceHolder：

<asp:RadioButton ID="rbnDontLimit" runat="server" /> 
<asp:CheckBox ID="chkWhatever" CssClass="dcDetails" runat="server" /> 
<asp:Label ID="lblWhatever" AssociatedControlID="chkWhatever">12 months</asp:Label>

生成的HTML：

<input id="ctl00_MainContent_rbnDontLimit" type="radio" name="ctl00$MainContent$rbnDontLimit" value="ctl00_MainContent_rbnDontLimit" /> 
<span class="dcDetails"><input id="ctl00_MainContent_chkWhatever" type="checkbox" name="ctl00$MainContent$chkWhatever" /></span> 
<label for="ctl00_MainContent_chkWhatever" id="ctl00_MainContent_lblWhatever">12 months</label>

而且在页面上你的JavaScript：

$("#<%= rbnDontLimit.ClientID %>").click(function() { 
    $('.dcDetails').attr('checked', false).attr('disabled', true).each(function(){ 
      $('label[for=' + $(this).attr('id') + ']').addClass('disabled'); 
    }); 
}); 
// Using <%= rbnDontLimit.ClientID %> on your .aspx page will generate: 
// "ctl00_MainContent_rbnDontLimit"

是的，谢谢，我打算使用该技术！ – 2009-08-20 20:54:18

将元素的显示文字设置为“变灰”

相关推荐