jQuery Plug-ins for Checkboxes and Disabling Inputs

Posted on July 14, 2009 by Michael Schurter

Here are 3 helper jQuery functions from my ever-mutating util.js file.

jQuery.check(); – Checks or unchecks a checkbox input field based on the boolean you pass it. Very simple, but a handy shortcut. Does not trigger any events like click or change by design.

jQuery.enable()/jQuery.disable() – Does 3 things:

  1. Adds or removes the “disabled” class on all matched elements.
  2. Sets the disabled HTML DOM property on elements which support it (input and select).
  3. Adds or removes the “disabled” class for any labels whose for attribute matches the ID of an affected input.

That last little side effect is what makes these 2 helper functions so handy. I like to subtly theme label.disabled to indicate when a field is disabled.

(function(){
	jQuery.fn.extend({
		check: function(on) { return this.each(function() {
			this.checked = true ? on !== false : false;
		});},
		enable: function() {
			this.removeClass('disabled');
			return this.each(function() {
				if (this.disabled !== undefined) {
					// Only disable elements that support it
					this.disabled = false;
 
					// Affect labels as well
					$("label[for="+this.id+"]").removeClass("disabled");
				}
			});
		},
		disable: function() {
			this.addClass('disabled');
			return this.each(function() {
				if (this.disabled !== undefined) {
					// Only disable elements that support it
					this.disabled = true;
 
					// Affect labels as well
					$("label[for="+this.id+"]").addClass("disabled");
				}
			});
		}
	});
})();

Would love to hear feedback.

This entry was posted in Open Source, Technology. Bookmark the permalink.
  • http://dancoulter.com Dan Coulter

    Using this format might fit better with other jQuery functions:

    .checked(); // Returns true or false if the first matching element is checked
    .checked(bool); // Sets all of the elements
    .checkedToggle(); // Toggles the elements

    .enabled(); // Returns true or false
    .enabled(bool); // enables or disables the elements
    .enabledToggle(); // toggles the elements

  • http://michael.susens-schurter.com/blog/ Michael Schurter

    Good call. My versions are all pretty tailored to my specific use cases. Your API would be much more pleasant for general distribution.