代码之家 › 专栏 › 技术社区 › marc_s MisterSmith

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

css jquery

marc_s MisterSmith · 技术社区 · 16 年前

给定这个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技巧可以使文本看起来暗淡??

马克

3 回复 | 直到 16 年前

Josh Leitzel 16 年前

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

Sampson 16 年前

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

John Rasch 16 年前

如果使用ASP.NET控件,请确保使用 ClientID 编写JavaScript时按钮控件的属性。这将使您不必处理内容占位符中损坏的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>

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前