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

mar*_*c_s 3 css jquery

鉴于此 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>
Run Code Online (Sandbox Code Playgroud)

现在,单击“Do Not Limit”按钮将正确禁用复选框(感谢 gw,为您提供的所有帮助!),但文本仍与以前相同。

是否有另一个聪明的 jQuery/CSS 技巧可以使该文本变暗?

马克

Jos*_*zel 5

<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>
Run Code Online (Sandbox Code Playgroud)

更改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>
Run Code Online (Sandbox Code Playgroud)

并添加 CSS 定义:

.disabled { color: gray; }
Run Code Online (Sandbox Code Playgroud)