JSFiddle - React, Tailwind, and code Playground
by IllusionMH
HTML
<form id="frm" action="#">
<select id="s1">
<option value="0"></option>
<option value="1">11</option>
<option value="2">12</option>
<option value="3">13</option>
</select>
<select id="s2">
<option value="0"></option>
<option value="1">21</option>
<option value="2">22</option>
<option value="3">23</option>
</select>
<select id="s3">
<option value="0"></option>
<option value="1">31</option>
<option value="2">32</option>
<option value="3">33</option>
</select>
</form>
<div id="log"></div>
JavaScript
$(function() {
var selects = $("#frm select"),
sl = selects.length,
ns, //for not selected(value == "0") selects
m = 2; //maximum number of selected selects
selects.change(function() {
ns = selects.filter(function(i) { //make list of NOT selected selects
return $(this).val() == "0";
});
if (ns.length <= sl - m) {
ns.attr("disabled", "disabled");
} else {
ns.filter("[disabled]").removeAttr("disabled");
}
});
});