jquery- unchecking checkbox on dropdown change not working

I have a list of users. Each user has a checkbox having a unique value. There is a dropdown menu. And when the dropdown is changed, a set of users are checked. Each dropdown change, a new set of users are checked. This much is working properly. But I'm not able to clear the previous checkboxes checked based on the last selected dropdown value

HTML

<div class="form-group">
  <label>Select One</label>
  <select name="ddl" id="ddl" data-placeholder="-- Select --" class="form-control select2">
    <option value="">All</option>
    <option value="1">
      One </option>
    <option value="2">
      Two </option>
    <option value="3">
      Third </option>
    <option value="4">
      Four </option>
    <option value="5">
      Five </option>
  </select>
</div>


<div id="user367" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">steve</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers367" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="367">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="user369" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">sam</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers369" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="369">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="user370" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">martha</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers370" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="370">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="user378" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">bonnie</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers378" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="378">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="user511" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">cathy</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers511" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="511">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="user864" class="col-md-4">
  <div class="box box-danger">
    <div class="box-header with-border">
      <h3 class="box-title">jordan</h3>

      <div class="box-tools pull-right">
        <div class="checkbox">
          <label>
            <input id="shiftUsers864" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="864">
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

Javascript

$(document).ready(function() {
  $('#ddl').on('change', function() {
    var selectedShift = this.value;
    //$('input:checkbox').attr('checked',false);
    //$(".shiftUsersClass").attr('checked', false);
    if (selectedShift == 1) {
      var result = [{
        "staff_id": "367"
      }, {
        "staff_id": "864"
      }];
    }
    if (selectedShift == 2) {
      var result =[{"staff_id":"370"}];
    }
    if (selectedShift == 3) {
      var result= [{"staff_id":"369"}];
    }
    if (selectedShift == 4) {
      var result= [{"staff_id":"378"}];
    }
    if (selectedShift == 5) {
      var result=[{"staff_id":"511"}];
    }

    $.each(result, function(index, res) {
      $("#shiftUsers" + res.staff_id).attr('checked', 'checked');
    });

  });
});

Things I tried 1) Tried to clear all the previously checked checkbox for each change of dropdown value.

$('input:checkbox').attr('checked',false);

2) Added a class for each checkbox and tried to uncheck the previously checked checkbox for each change of dropdown value.

$(".shiftUsersClass").attr('checked', false);

When I tried both the option, no checkboxes are getting checked. What's causing this issue? Thanks!

FIDDLE