iPhone Style Checkboxes on IE<=8

Test to see if iPhone Style Checkboxes work with IE8 and lower.

by Marventus

HTML

<input class="iPhone" type="checkbox" />
<br/><br/>
<input class="iOs" type="checkbox" />

CSS

input {
    display:block;
}
________________________________________________________
START iPhone Style Checkboxes
Author	:Thomas Reynolds
Url		:http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html
Github	:https://github.com/tdreyno/iphone-style-checkboxes
*/
.iPhoneCheckContainer {
-webkit-transform:translate3d(0,0,0);
position:relative;
height:27px;
cursor:pointer;
overflow:hidden;
}
.iPhoneCheckContainer input {
position:absolute;
top:5px;
left:30px;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity:0;
}
.iPhoneCheckContainer label {
white-space:nowrap;
font-size:17px;
line-height:17px;
font-weight:bold;
font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
cursor:pointer;
display:block;
height:27px;
position:absolute;
width:auto;
top:0;
padding-top:5px;
overflow:hidden;
}
.iPhoneCheckContainer, .iPhoneCheckContainer label {
user-select:none;
-moz-user-select:none;
-khtml-user-select:none;
}
.iPhoneCheckDisabled {
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity:0.5;
}
label.iPhoneCheckLabelOn {
color:white;
background:url('http://elblawg.com/dragdrop/images/iphone-style-checkboxes/on-red.png') no-repeat;
text-shadow:0px 0px 2px rgba(0, 0, 0, 0.6);
left:0;
padding-top:5px;
}
label.iPhoneCheckLabelOn span {
padding-left:8px;
}
label.iPhoneCheckLabelOff {
color:#8b8b8b;
background:url('http://elblawg.com/dragdrop/-images/iphone-style-checkboxes/off.png') no-repeat right 0;
text-shadow:0px 0px 2px rgba(255, 255, 255, 0.6);
text-align:right;
right:0;
}
label.iPhoneCheckLabelOff span {
padding-right:8px;
}
.iPhoneCheckHandle {
display:block;
height:27px;
cursor:pointer;
position:absolute;
top:0;
left:0;
width:0;
background:url('http://elblawg.com/dragdrop/images/iphone-style-checkboxes/slider_left.png?1284697268') no-repeat;
padding-left:3px;
}
.iPhoneCheckHandleRight...

JavaScript

/******************************************************************************
START iPhone Style Checkboxes
Author	: Thomas Reynolds
Url		: http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html
Github	: https://github.com/tdreyno/iphone-style-checkboxes
*******************************************************************************/
(function() {
  var iOSCheckbox,
	__slice = Array.prototype.slice;
  iOSCheckbox = (function() {
	function iOSCheckbox(elem, options) {
	  var key, opts, value;
	  this.elem = jQuery(elem);
	  opts = jQuery.extend({}, iOSCheckbox.defaults, options);
	  for (key in opts) {
		value = opts[key];
		this[key] = value;
	  }
	  this.elem.data(this.dataName, this);
	  this.wrapCheckboxWithDivs();
	  this.attachEvents();
	  this.disableTextSelection();
	  if (this.resizeHandle) this.optionallyResize('handle');
	  if (this.resizeContainer) this.optionallyResize('container');
	  this.initialPosition();
	}
	iOSCheckbox.prototype.isDisabled = function() {
	  return this.elem.is(':disabled');
	};
	iOSCheckbox.prototype.wrapCheckboxWithDivs = function() {
	  this.elem.wrap("<div class='"+this.containerClass+"' />");
	  this.container = this.elem.parent();
	  this.offLabel = jQuery("<label class='"+this.labelOffClass+"'>\n  <span>"+this.uncheckedLabel+"</span>\n</label>").appendTo(this.container);
	  this.offSpan = this.offLabel.children('span');
	  this.onLabel = jQuery("<label class='"+this.labelOnClass+"'>\n  <span>"+this.checkedLabel+"</span>\n</label>").appendTo(this.container);
	  this.onSpan = this.onLabel.children('span');
	  return this.handle = jQuery("<div class='"+this.handleClass+"'>\n  <div class='"+this.handleRightClass+"'>\n	<div class='"+this.handleCenterClass+"' />\n  </div>\n</div>").appendTo(this.container);
	};
	iOSCheckbox.prototype.disableTextSelection = function() {
	  if (jQuery.browser.msie) {
		return jQuery([this.handle, this.offLabel, this.onLabel, this.container]).attr("unselectable", "on");
	 ...