Bootstrap input state toggle buttons

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<input type="checkbox" class="hidden" id="single_checkbox" />
<label class="btn" for="single_checkbox">Single</label>
<br/><br/>
<div class="btn-group">
    <input type="checkbox" id="checkbox_1" />
    <label class="btn" for="checkbox_1">Checkbox one</label>
    <input type="checkbox" id="checkbox_2" />
    <label class="btn" for="checkbox_2">Checkbox two</label>
    <input type="checkbox" disabled id="checkbox_3" />
    <label class="btn" for="checkbox_3">Disabled checkbox three</label>
</div>
<br/>
<div class="btn-group">
    <input type="radio" name="radios" id="radio_1" />
    <label class="btn" for="radio_1">Radio one</label>
    <input type="radio" name="radios" id="radio_2" />
    <label class="btn" for="radio_2">Radio two</label>
    <input type="radio" name="radios" id="radio_3" />
    <label class="btn" for="radio_3">Disabled radio three</label>
</div>

CSS

.btn-group > input {
    display: none;
}

.btn {
  padding: 10px;
}

.btn-group input:first-child + .btn {
     /* This is an actual copy/paste of the .btn-group .btn:first-child style */
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    margin-left: 0;
}

input:checked + label.btn {
    /* This is an actual copy/paste of the .btn:active style */
    background-color: #E6E6E6;
    background-image: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.5);
    outline: 0 none;
}

JavaScript

jQuery(document).ready(function($){
    $('#radio_3').prop('disabled', true);
    $('#radio_2').prop('checked', true);
});