jQuery checkbox check-uncheck issue : <p>I have checkboxes on my page:</p>

<pre><code>&lt;div class="mail-control"&gt;
    &lt;input class="magic-checkbox select-doc" type="checkbox"&gt;
    &lt;label for="email-list-1"&gt;&lt;/label&gt;
&lt;/div&gt;
</code></pre>

<p>I also have links to select and deselect all checkboxes:</p>

<pre><code>&lt;ul class="dropdown-menu"&gt;
    &lt;li&gt;&lt;a href="#" id="select-all-list"&gt;Select all&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="deselect-all-list"&gt;Deselect all&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>This code selects and deselects the checkboxes:</p>

<pre><code>$('#select-all-list').on('click', function() {
    $('.select-doc').prop('checked', true);
});

$('#deselect-all-list').on('click', function() {
    $('.select-doc').prop('checked', true);
});
</code></pre>

<p><strong>The problem is: when I select all checkboxes - I can't uncheck some of them manually (directly with my mouse). How do I do it?</strong></p>
