Refactor jquery (coffescript) code with checkboxes I have two different set of checkboxes. With the coffescript code below I set the maximum amount of checkable items at 3. I would like to refactor this code, to be cleaner and compact, but I can't get it.

$("div.feature_list :checkbox").click -&gt;
  if $("div.feature_list :checked").length &gt;= 3
    $("div.feature_list :checkbox:not(:checked)").attr "disabled", "disabled"
    $("div.feature_list :checkbox:not(:checked)").button disabled: true
  else
    $("div.feature_list :checkbox:not(:checked)").button disabled: false

$("div.style_list :checkbox").click -&gt;
   if $("div.style_list :checked").length &gt;= 3
     $("div.style_list :checkbox:not(:checked)").attr "disabled", "disabled"
     $("div.style_list :checkbox:not(:checked)").button disabled: true
   else
     $("div.style_list :checkbox:not(:checked)").button disabled: false
Step 1: DRY. Encapsulate the "limit checkboxes" behavior in a function

limitCheckboxesIn = (container, limit = 3) -&gt;
  checkboxes = $(container).find ":checkbox"
  checkboxes.on "click", (event) -&gt;
    checked   = checkboxes.filter ":checked"
    unchecked = checkboxes.not checked
    state     = disabled: checked.length &gt;= limit
    unchecked.prop(state).button state


Step 2: ... well, that pretty much it. Call it like so:

$ -&gt;
  limitCheckboxesIn "div.feature_list"
  limitCheckboxesIn "div.style_list"


Here's a demo

By the way, if you just want the most compact solution, you can skip some assignments:

limitCheckboxesIn = (container, limit = 3) -&gt;
  checkboxes = $(container).find ":checkbox"
  checkboxes.on "click", (event) -&gt;
    disabled = checkboxes.filter(":checked").length &gt;= limit
    checkboxes.not(":checked").prop({disabled}).button {disabled}


Personally, I find this a little less readable, but it's a matter of taste; the code's functionally identical.