Question

鉴于此HTML - 当我选择“不限制”单选按钮时，如何扩展我的jQuery以使<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>

现在，单击“不限制”按钮将正确禁用该复选框（非常感谢，gw，对于这一个的所有帮助！），但文本仍然显示与以前相同。

还有另一个聪明的jQuery / CSS技巧可以使文本显得暗淡吗？

马克

Answer 1

<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; }

Answer 2

单击收音机时只需切换一个类 - 一个类将颜色设置为＃333333，另一个类设置为#CCCCCC

Answer 3

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

ContentPlaceHolder中的ASP.NET标记示例：

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

将<input />元素的显示文本设置为“dimmed”

3 个答案: