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
source to share
<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; }
source to share
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"
source to share