title: jquery- unchecking checkbox on dropdown change not working
body: <p>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</p>
  
  <p><strong>HTML</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(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');
          });
      
        });
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
      &lt;div class="form-group"&gt;
        &lt;label&gt;Select One&lt;/label&gt;
        &lt;select name="ddl" id="ddl" data-placeholder="-- Select --" class="form-control select2"&gt;
          &lt;option value=""&gt;All&lt;/option&gt;
          &lt;option value="1"&gt;
            One &lt;/option&gt;
          &lt;option value="2"&gt;
            Two &lt;/option&gt;
          &lt;option value="3"&gt;
            Third &lt;/option&gt;
          &lt;option value="4"&gt;
            Four &lt;/option&gt;
          &lt;option value="5"&gt;
            Five &lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      
      
      &lt;div id="user367" class="col-md-4"&gt;
        &lt;div class="box box-danger"&gt;
          &lt;div class="box-header with-border"&gt;
            &lt;h3 class="box-title"&gt;steve&lt;/h3&gt;
      
            &lt;div class="box-tools pull-right"&gt;
              &lt;div class="checkbox"&gt;
                &lt;label&gt;
                  &lt;input id="shiftUsers367" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="367"&gt;
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="user369" class="col-md-4"&gt;
        &lt;div class="box box-danger"&gt;
          &lt;div class="box-header with-border"&gt;
            &lt;h3 class="box-title"&gt;sam&lt;/h3&gt;
      
            &lt;div class="box-tools pull-right"&gt;
              &lt;div class="checkbox"&gt;
                &lt;label&gt;
                  &lt;input id="shiftUsers369" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="369"&gt;
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="user370" class="col-md-4"&gt;
        &lt;div class="box box-danger"&gt;
          &lt;div class="box-header with-border"&gt;
            &lt;h3 class="box-title"&gt;martha&lt;/h3&gt;
      
            &lt;div class="box-tools pull-right"&gt;
              &lt;div class="checkbox"&gt;
                &lt;label&gt;
                  &lt;input id="shiftUsers370" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="370"&gt;
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="user378" class="col-md-4"&gt;
        &lt;div class="box box-danger"&gt;
          &lt;div class="box-header with-border"&gt;
            &lt;h3 class="box-title"&gt;bonnie&lt;/h3&gt;
      
            &lt;div class="box-tools pull-right"&gt;
              &lt;div class="checkbox"&gt;
                &lt;label&gt;
                  &lt;input id="shiftUsers378" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="378"&gt;
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="user511" class="col-md-4"&gt;
        &lt;div class="box box-danger"&gt;
          &lt;div class="box-header with-border"&gt;
            &lt;h3 class="box-title"&gt;cathy&lt;/h3&gt;
      
            &lt;div class="box-tools pull-right"&gt;
              &lt;div class="checkbox"&gt;
                &lt;label&gt;
                  &lt;input id="shiftUsers511" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="511"&gt;
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="user864" class="col-md-4"&gt;
        &lt;div class="box box-danger"&gt;
          &lt;div class="box-header with-border"&gt;
            &lt;h3 class="box-title"&gt;jordan&lt;/h3&gt;
      
            &lt;div class="box-tools pull-right"&gt;
              &lt;div class="checkbox"&gt;
                &lt;label&gt;
                  &lt;input id="shiftUsers864" class="shiftUsersClass" name="shiftUsers" type="checkbox" value="864"&gt;
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Things I tried</strong>
  1) Tried to clear all the previously checked checkbox for each change of dropdown value.</p>
  
  <pre><code>$('input:checkbox').attr('checked',false);
  </code></pre>
  
  <p>2) Added a class for each checkbox and tried to uncheck the previously checked checkbox for each change of dropdown value.</p>
  
  <pre><code>$(".shiftUsersClass").attr('checked', false);
  </code></pre>
  
  <p>When I tried both the option, no checkboxes are getting checked.
  What's causing this issue? Thanks!</p>
  
  <p><a href="https://jsfiddle.net/iamsajeev/6wtz3yLu/" rel="nofollow noreferrer">FIDDLE</a></p>