鉴于此 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 技巧可以使该文本变暗?
马克
<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)