JSFiddle - React, Tailwind, and code Playground

by Shin Okada

HTML

<div class="">
<label id="outcome" for="outcomes"><em>* </em>Outcomes: </label><br>
<input type="checkbox" name="outcomes[]" value="1" class="outcome-checkbox"  />
<p class='outcomes'>Discuss plan an evaluate student-initiated activities</p><input type="checkbox" name="outcomes[]" value="2" class="outcome-checkbox"  />
<p class='outcomes'>Become more aware of our strengths and areas for growth</p><input type="checkbox" name="outcomes[]" value="3" class="outcome-checkbox"  />
<p class='outcomes'>Undertake challenges and develop new skills</p><input type="checkbox" name="outcomes[]" value="4" class="outcome-checkbox"  />
<p class='outcomes'>Persevere in action</p><input type="checkbox" name="outcomes[]" value="5" class="outcome-checkbox"  />
<p class='outcomes'>Work collaboratively with others</p><input type="checkbox" name="outcomes[]" value="6" class="outcome-checkbox"  />
<p class='outcomes'>Develop international-mindedness through global engagement, multilingualism and intercultural understanding</p><input type="checkbox" name="outcomes[]" value="7" class="outcome-checkbox"  />
<p class='outcomes'>Consider the ethical implications of our actions.</p></div>

JavaScript

var limit = 2;
$('input.outcome-checkbox').on('change', function(evt) {
  if ($(this).siblings(':checked').length >= limit) {
    this.checked = false;
  }
});