jQuery.SimpleSelect demo #2

Disabling an re-enabling the SimpleSelect

HTML

<script src="http://pioul.fr/ext/jquery-simpleselect/jquery.simpleselect.2.0.0.min.js"></script>
<link rel="stylesheet" href="http://pioul.fr/ext/jquery-simpleselect/jquery.simpleselect.2.0.0.min.css">
<div>
    <button id="disable-select">Disable the <code>&lt;select&gt;</code></button> or
    <button id="enable-select">Enable the <code>&lt;select&gt;</code></button> then
    <button id="refresh-simpleselect-state">Refresh the state of the SimpleSelect</button>
    <hr/>
    <button id="disable-simpleselect">Disable both the <code>&lt;select&gt;</code> and the SimpleSelect</button>
    <hr/>
    <button id="enable-simpleselect">Enable both the <code>&lt;select&gt;</code> and the SimpleSelect</button>
</div>

<label for="example-select">What's your favorite cat breed?</label>
<select id="example-select">
    <option>Persian</option>
    <option>Maine Coon</option>
    <option>Exotic</option>
    <option>Siamese</option>
    <option>Abyssinian</option>
    <option>Ragdoll</option>
    <option>Birman</option>
    <option>American Shorthair</option>
    <option>Oriental</option>
    <option>Sphynx</option>
</select>

CSS

body {
	padding: 10px;
	margin: 0;
	background: #fff;
	font: 14px Arial, Helvetica, Geneva, sans-serif;
	line-height: 1.5em;
	color: #3a3a3a;
}

body > div:first-child {
	display: inline-block;
	margin-bottom: 40px;
}

label {
	display: block;
}

JavaScript

var select = $("#example-select").simpleselect();
debugger

$("#disable-select").on("click", function() {
    select.prop("disabled", true);
});

$("#enable-select").on("click", function() {
    select.prop("disabled", false);
});

$("#refresh-simpleselect-state").on("click", function() {
    select.simpleselect("refreshState");
});

$("#disable-simpleselect").on("click", function() {
    select.simpleselect("disable");
});

$("#enable-simpleselect").on("click", function() {
    select.simpleselect("enable");
});