Setting the text of the input element <input> to "dimmed"
Given this HTML: How can I extend jQuery so that the text displayed by the elements <input>
is "darkened" or dimmed when I select the "Borderless" radioblock?
See a sample here: 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>
Right now, clicking the Don't Limit button will uncheck the box (thanks gw for your help on this!), But the text is still the same as before.
Is there another clever jQuery / CSS trick to make this text inaccessible?
Mark
<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>
Change gray
to any shade you want.
Or you can go cleaner:
<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>
And add CSS definition:
.disabled { color: gray; }
Just switch to class when you click the radio - one class sets the color to # 333333 and the other to #CCCCCC
If you are using ASP.NET controls, make sure you use the ClientID
button control property when you write JavaScript. This saves you the trouble of handling malformed identifiers in content placeholders.
Sample ASP.NET markup in 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>
Generated 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>
And for your JavaScript on the page:
$("#<%= 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"