jQuery toggleClass example

Toggle class name on click in jQuery

by Sascha

HTML

<select id="s1"></select>
<select id="s2"></select>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

JavaScript

let maxSum = 10;

let lockOptions= function() {
  let $select= $(this);
  let remaining= maxSum - parseInt($select.val());
  let id = $select.prop('id');
  let $otherSelect= $('select:not(#'+id+')');
  let options= $otherSelect[0].options;
  for (let i = 0;i<options.length;i++) {
    options[i].disabled= options[i].value > remaining;
  }
}

let selects= $('select');
if (selects.length > 0) {
  for (let select of selects) {
  	let $select= $(select);
    $select.on('change', lockOptions)
    for (let i = 0;i<=10;i++) {
    	$select.append($('<option>').val(i).text(i));
    }
  }
}