Ask the CSS Guy

Disabled labels and the Trilemma plugin

I'm working on a form that makes use of the disabled attribute, and the default browser settings for disabled inputs don't have as much contrast as what I'd like. To better distinguish at a glance which inputs are disabled/enabled, I've chosen to style the labels of disabled inputs with a faint gray color.

Consider the differences in the screenshot below.

You may also view a live HTML example of the above form to see how disabled fields appear in your browser.

HTML

The difference in HTML is a small one. The first example might have a checkbox whose HTML looks like this:

<input type="checkbox" id="astronomy1" disabled="true" />
<label for="astronomy1">Astronomy</label>

While the second example, I've added class="disabled" to the label:

<input type="checkbox" id="astronomy2" disabled="true" />
<label for="astronomy2" class="disabled">Astronomy</label>

CSS

I've chosen to apply a light gray color to any label with a class of 'disabled'.

label.disabled { color: #aaa; }

I found this technique to be particularly useful if you have a form that requires some fields to dynamically become disabled/enabled, in which case some JavaScript would also come in handy. Consider the trilemma:

The Trilemma jQuery plugin

According to Wikipedia, a trilemma is a difficult choice from three options. A trilemma can also be expressed as 'a choice among three favorable options, only two of which are possible at the same time.' That second part is where the name for this plugin came from.

(I found out about this term from the comments of the 2005 "Pick Two" post on kotte.org, a fun read and part inspiration for this plug-in.)

As my illustrative example, I've chosen the trilemma that web designers offer to their clients: Out of good, fast, and cheap, you can only pick two.

How is this represented on an online request for proposal? I would present it as a series of checkboxes:

The trilemma plugin will disable the other checkboxes after the user checks two of them. If the option is turned on, the plugin also applies class="disabled" to the labels of disabled inputs.

Try it out.

This plugin isn't limited to '2 out of 3' - the trilemma is just a way to illustrate what this plugin does. The '2' maximum is a default setting, but you can set it to be anything. For example, maybe you have 8 options and only wanted to allow a maximum of 5 to be checked. So the 'trilemma' plugin is simply a jQuery plugin that allows you to limit the number of checkboxes that can be checked within a set. (Yes, changing this number to anything other than '2 out of 3' breaks the meaning of trilemma, but I'm ok with that.)

Trilemma plugin: examples, how-tos, downloads

Here are some examples.

• Pick 2 (out of 3): The maximum of '2' is default out of the box behavior.
• Pick 2 (out of 5): This is the same as the previous example, except there are more to choose from. The maximum selectable is still '2'.
• Pick 4 (out of 5): Changes the maximum limit to something other than 2.
• Pick 2 (out of 3) with disabled labels: Adds class="disabled" to the labels of the disabled fields.
• Pick 3 (out of 10) with disabled labels: Changes the maximum limit of selectable checkboxes to something other than 2, and adds class="disabled" to the labels of the disabled fields.

To install, download and insert jQuery and jQuery.trilemma.js in the head of your document, then call trilemma on whatever element contains all the checkboxes. In the example below, it assumes all the checkboxes are wrapped in a fieldset with a class="goodFastCheapFieldset".

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.trilemma.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $('fieldset.goodFastCheapFieldset').trilemma();
});
</script>

By default, trilemma only allows 2 checkboxes in the set to be checked. To allow more, just pass a new maximum by setting 'max', like so:

$(function(){
  $('fieldset.sciences').trilemma({max:4});
});

Also by default, trilemma won't try to set class="disabled" on the labels. If you want to turn it on, just set it to true, like so:

$(function(){
  $('fieldset.sciences').trilemma({disablelabels:true});
});

To use disabled labels and set a maximum other than '2', use a comma to separate those options:

$(function(){
  $('fieldset.sciences').trilemma({max:4,disablelabels:true});
});

Download a zip with the trilemma plugin and examples.

If you use the disabled labels option, make sure to add something to your stylesheet, otherwise you may not notice the difference!

If you find this article or plugin helpful, I'd like to hear about it. Also, consider kicking off your next amazon purchase using the link in my sidebar. I get referral credit, and it costs you nothing extra.

# August 19, 2009 5:25 PM