Checkboxes and Radio buttons

by Plippie Plop

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="form-horizontal">
<fieldset>

<div class="control-group">
				<div class="controls">
					<label class="checkbox checked">
						<input checked="checked" type="checkbox" value="Yes">
						<p>Abracadabra and some other filligns to emulate a long sentence or looks like a very long interesting read but actualy isn't that interesting.</p>
					</label>
				</div>
			</div>
			
			<div class="control-group">
			<label class="control-label">Some label</label>
				<div class="controls">				
					<label class="checkbox">
						<input type="checkbox" value="Yes">
						<p>Abracadabra and some other filligns to emulate a long sentence or looks like a very long interesting read but actualy isn't that interesting.</p>
					</label>
				</div>
			</div>
			
		<div class="control-group">
			<label class="control-label">Some label</label>
				<div class="controls">				
					<label class="checkbox">
						<input type="checkbox" value="Yes" disabled="disabled">
						<p>Abracadabra and some other filligns to emulate a long sentence or looks like a very long interesting read but actualy isn't that interesting.</p>
					</label>
				</div>
			</div>
			
		<div class="control-group">
			<label class="control-label">Some label</label>
				<div class="controls">				
					<label class="checkbox">
						<input type="checkbox" value="Yes" disabled="disabled" checked="checked">
						<p>Abracadabra and some other filligns to emulate a long sentence or looks like a very long interesting read but actualy isn't that interesting.</p>
					</label>
				</div>
			</div>
			
			
			<div class="control-group">
			<label class="control-label">Some label</label>
				<div class="controls">				
					<label class="radio">
						<input type="radio" name="henk" value="Yes"...

CSS

body{
    font-family:verdana;
    
}

/** CSS for tick on checkbox***/

/* Hide original checkbox */
input[type="checkbox"], input[type="radio"] {
-webkit-appearance: none;
opacity:0;
}

.checkbox::before,
.radio::before{
color: rgb(214, 214, 214);
background:rgb(254, 254, 254);
position:absolute;
width:24px;
height:24px;
border-radius:6px;
content: "";
cursor: pointer;
font-family: FontAwesome;
margin:0;
margin-top:-2px;
margin-left:-30px;
font-size:18px;	
text-align:center;
padding-top:2px;
box-shadow: 0  0 3px 0 rgba(0,0,0,.4);
text-shadow:0 -1px 0 rgba(0,0,0,.2);
}

.radio::before{
	border-radius:50%;
}

.checkbox.checked::before{
background:#03A0FA;
color:#fff;
content: "\0221a";
font-weight:bold;
}
.radio.checked::before{
background:#03A0FA;
color:#fff;
font-size:24px;
font-weight:bold;
content: "\02219";
}



.checkbox.disabled::before,
.radio.disabled::before{
background:rgb(244, 244, 244);
color: rgb(214, 214, 214);
content: "";
}

.checkbox.disabled.checked::before{
background:rgb(244, 244, 244);
color: rgb(214, 214, 214);
content: "\0221a";
    font-weight:bold;
}
.radio.disabled.checked::before{
background:rgb(244, 244, 244);
color: rgb(214, 214, 214);
font-size:24px;
font-weight:bold;
content: "\02219";
}


.checkbox p, .radio p{
	font-size:14px;
	line-height:normal;
}

label.checkbox{
padding:5px;
padding-left:30px;
    
}

.control-group {
padding: 7px 15px;
margin-bottom: 0px;
border-top: 1px dotted rgb(204, 204, 204);
}

.control-group:first-child {
border-top: none;
}

.form-horizontal .controls span {
line-height: 30px;
}
.control-label {
margin-right: 5px;
font-weight: 800;
}

JavaScript

// checkboxes	
	$('input[type="checkbox"]:checked').closest('.checkbox').addClass('checked');	
	$('input[type="checkbox"]:disabled').closest('.checkbox').addClass('disabled');	
	$(document).on('click','input[type="checkbox"]', function(){	
		if( this.checked){
			$(this).closest('.checkbox').addClass('checked');
		} else {
			$(this).closest('.checkbox').removeClass('checked');
		}
	});
	
	//radios:
	$('input[type="radio"]:checked').closest('.radio').addClass('checked');	
	$('input[type="radio"]:disabled').closest('.radio').addClass('disabled');	
	$(document).on('click','input[type="radio"]', function(){		
		var name = $(this).attr('name');		
		$('input:radio[name="'+name+'"]').closest('.radio').removeClass('checked');			
		if( $(this).prop('checked')){
				$(this).closest('.radio').addClass('checked');		
		}
	});