JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://www.mastepinnelaand.nl/assets/js/chosen/chosen.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.mastepinnelaand.nl/assets/js/chosen/chosen.css">
<section class="number_details">
<h1>Lipsum</h1>
<div class="wrapper">
<p>More text</p>
<div class="options" id="0">
<h2>Heading</h2>
<div class="selection first">
<label>Label</label>
<select data-placeholder="Select numbers" data-maxpersons="1" style="width: 400px;" multiple class="chzn-select">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option selected value="3">3</option>
</select>
</div>
<div class="selection">
<label>Label</label>
<select data-placeholder="Selecteer other numbers" data-maxpersons="2" style="width: 400px;" multiple class="chzn-select">
<option value=""></option>
<option selected value="1">1</option>
<option selected value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
</section>
CSS
body {
background: #fff url(/siteimages/bg_body.png) repeat-x;
color: #333;
font: 100%/1em Arial, Verdana, sans-serif;
margin: 0;
}
JavaScript
$('.chzn-select').chosen().change(function () {
var selected = [];
$(this).parent().parent().find("option")
.each(function () {
if (this.selected) {
selected[this.value] = this;
}
})
.each(function () {
this.disabled = selected[this.value] && selected[this.value] !== this;
})
.each(function () {
if ($(this).parent().data('maxpersons') === $(this).parent().find('option:selected').length) {
$(this).parent().find('option:not(:selected)').prop('disabled', true);
}
});
$('.chzn-select').trigger("liszt:updated");
});