Monthly Archives: August 2009

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.

Regular labels vs labels with a disabled class
Regular labels vs labels with a disabled class

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 designers trilemma: it can be good and fast, but it wont be cheap.
The designers trilemma: it can be good and fast, but it wont be cheap.

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.

The designers trilemma: it can be good and fast, but it wont be cheap.

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.

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.

Update 2/23/2010: Fixed a minor bug that involved using more than one set of checkboxes on the same page.

59+ Amazing (and jaw-dropping) web design-related lists with titles that will rip your face off, blow your mama’s mind, and make you cry under the crushing pain of their inspiration

I couldn’t resist. The round-up post trend is growing at an unbelievable rate. If lists are that good, then surely a list of lists is even better, right? Let’s get started.

Titles with interesting adjectives and words

  1. 20+ Wicked Proof of Concepts for Better use of jQuery/CSS

    I appreciate concepts that keep the wicked from seeping through.

  2. 40 Sexy And Creative Typographic Logo Designs

    This is the Justin Timberlake of article titles.

  3. 50 Kick-Ass And Creative Dark Website Designs

    Of all terms to use, I like ‘kick-ass’ the most.

  4. 6 Easy Ways To Cure A Nasty Case Of Redesign-itis

    I’m glad there’s a 6-step program to treat this.

  5. 27 Best Photoshop Web Layout Design Tutorials to Design Decent Web Layouts

    With the other lists using words like ‘brilliant’ and ‘amazing’, this title doesn’t seem to be aiming high enough with ‘decent’.

  6. 16 bitchin’ commands and shortcuts for Twitter

    Twitter was made for bitchin’, so this works doubly well.

(Titles that use) parentheses

  1. 75 (Really) Useful JavaScript Techniques

    (Really)?

  2. 10 Intelligent Ways of using [FORM] Elements

    Not really parentheses, but I can’t imagine why brackets are being used here.

  3. 15 CSS Properties You Probably Never Use (but perhaps should)

    ..(.)

  4. Web Nerd Terminology (Explained)

    Am I alone or does the title work better when ‘explained’ is not encompassed in parentheses?

  5. 50 Best-Of Designer’s (NEW) Download Picks and Resources

    Odd placement.

Things your must or should do (but in some cases probably don’t !)

  1. 21 Amazing CSS Techniques You Should Know
  2. 30 Fonts That All Designers Must Know & Should Own
  3. 8 fonts you probably don’t use in css, but should
  4. 15 CSS Properties You Probably Never Use (but perhaps should)
  5. 60+ Must Have jQuery Toolbox
  6. 30 More Must See Comment Designs for Blog Designers
  7. Nine Websites You Should Know About, But Probably Don’t
  8. 45 Creative Business Card Designs You Should’ve Seen
  9. 29 Web Design Blogs You Must Follow
  10. 9 (More) Useful Websites You Should Know About, But Probably Don’t

Posts that lost count of how many items are in the list, so they give up counting and slap on a plus (+) sign

  1. 80+ AJAX-Solutions For Professional Coding
  2. 40+ Tooltips Scripts With AJAX, JavaScript & CSS
  3. 25+ Create Amazing Image Effects with Some of the Best jQuery Plugins Available
  4. 45+ New jQuery Techniques For Good User Experience
  5. 33+ Online Resources to Learn CSS
  6. The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials
  7. 21+ Fresh Ajax CSS Tables
  8. 47+ Excellent Ajax CSS Forms
  9. 50+ Amazing Jquery Examples- Part1
  10. 45+ Fresh Out of the oven jQuery Plugins
  11. 23+ Impressive Tools for Faster Javascript/Ajax Development
  12. 51+ Best of jQuery Tutorials and Examples
  13. Form Elements: 40+ CSS/JS Styling and Functionality Techniques
  14. 20+ Tutorials and Resources for Working with Custom Fields in WordPress
  15. 13+ Fantastic Tools For Knowing How They’re Doing It
  16. 50+ Fonts for Big, Bold Headlines
  17. 70+ Visually Impressing Header Graphics

More round-up of round-ups

  1. 53 CSS-Techniques You Couldn’t Live Without
  2. 60 More AJAX- and Javascript Solutions For Professional Coding
  3. 30 Scripts For Galleries, Slideshows and Lightboxes
  4. 20 Creative Web Forms For Design Inspiration
  5. 40 Most Creative Business Cards You Will Ever See
  6. 50 Extremely Useful And Powerful CSS Tools
  7. 35 CSS-Lifesavers For Efficient Web Design
  8. 50 New CSS Techniques For Your Next Web Design
  9. 16 Impressive Flash-Like Javascript Animation Inspirations, Tutorials and Plugins
  10. 10 Advance jQuery Scripts to take Your Website to the Next Level
  11. 50 Fresh JavaScript Tools That Will Improve Your Workflow
  12. 15 Effective Tips and Tricks from the Masters of CSS
  13. 101 CSS Techniques Of All Time- Part 1
  14. 101 CSS Techniques Of All Time- Part2
  15. 37 More Shocking jQuery Plugins
  16. 14 Brilliant Tools for Evaluating Your Design’s Colors
  17. 10 Impressive JavaScript Animation Frameworks
  18. 25 Tutorials for Using Illustrator and Photoshop Together for Outstanding Results
  19. Powerful CSS-Techniques For Effective Coding
  20. 11 Reasons Why a Web CMS Will Make Your Life Easier and Your Wallet Fatter
  21. 20 jQuery Tutorials And Plugins To Impress Your Friends
  22. 28 Sites Producing Podcasts And Screencasts To Help You Grow As A Designer And Developer
  23. 19 Reasons You Should Blog And Not Just Tweet