jQuery plugin to increase checkbox accessibility

Posted on July 30, 2009, 4:13 pm, under Javascript.

Sometimes on IE and Firefox, when I click on the input label multiple times to toggle on/off quickly, clicking becomes text selection and checkbox won’t be toggled. ?So I made a simple jQuery plugin to fix the checkbox usability.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

jQuery.fn.extend({
	fixCheckbox: function(){
		return this.each(function(){
 
			if(jQuery.browser.safari) return;
 
			jQuery(this).find("label[for]").each(function(){
				var id = jQuery(this).attr("for");
				if(!(jQuery("#" + id).is(":checkbox"))) return;
 
				jQuery(this).click(function(e){
					jQuery(this).blur();
 
					if(e.target.id == id) return;
					e.preventDefault();
					var $input = jQuery("#" + id);
					$input.attr("checked", !$input.is(":checked"));
					$input.trigger("change");
				});
				if (jQuery.browser.msie) {
					jQuery(this).dblclick(function(e){
						jQuery(this).blur();
 
						if (e.target.id == id) return;
						var $input = jQuery("#" + id);
						e.preventDefault();
						$input.attr("checked", !$input.is(":checked"));
						$input.trigger("change");
					});
				}
			})
		});
	}
});

WebKit-based browsers such as Google Chrome and Safari works fine by default however Safari doesn’t seem to fire change event when checkbox checked is modified by javascript.

Here’s the working demo and source.

[EDIT] Maybe Safari is just fine as it is. ?Plugin will not affect Safari now.

Tags:
Comment (RSS)  |  Trackback

One Comment

  1. Alecia Mixdorf says:
    December 20, 2010 at 12:23 pm

    Hi, man, may I exchange backlinks with you that it may help to increase our own traffic, good for both of us. If you wish, please contact my own E-mail. Many thanks!

Leave a Reply

«
»