Databases
StackOverflow2013
Postsdbo
PORestricting user to check checkboxes based on minimum value using jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORestricting user to check checkboxes based on minimum value using jQuery
    text
    copied!<p>Here i have bunch of check boxes within their respective div's.</p> <p>Every div will contain a 'data-min' (ex: data-min="2") value to restrict user to check minimum no of check boxes in a div.</p> <p>Demo:<a href="http://jsfiddle.net/naresh_k28/HNmhL/30/" rel="nofollow">Fiddle</a></p> <p><strong>HTML</strong></p> <pre><code>&lt;select id="count"&gt; &lt;option value="1"&gt;1&lt;/option&gt; &lt;option value="2"&gt;2&lt;/option&gt; &lt;option value="3"&gt;3&lt;/option&gt; &lt;option value="4"&gt;4&lt;/option&gt; &lt;option value="5"&gt;5&lt;/option&gt; &lt;option value="6"&gt;6&lt;/option&gt; &lt;/select&gt; &lt;br/&gt; &lt;br/&gt; &lt;div class="checkbox" data-toggle="false" data-min="2" style='float:left;background:yellow;width:100px'&gt; &lt;input id="checkbox-1" type="checkbox" name="Data1" value="option1" /&gt; &lt;label for="checkbox-1"&gt;HTML&lt;/label&gt; &lt;br /&gt; &lt;input id="checkbox-2" type="checkbox" name="Data2" value="option2" /&gt; &lt;label for="checkbox-2"&gt;CSS&lt;/label&gt; &lt;br /&gt; &lt;input id="checkbox-3" type="checkbox" name="Data3" value="option3" /&gt; &lt;label for="checkbox-3"&gt;HTML&lt;/label&gt; &lt;br /&gt; &lt;/div&gt; &lt;div class="checkbox" data-toggle="false" data-min="2" style='float:left;margin-left:100px;background:brown;width:100px'&gt; &lt;input id="checkbox-4" type="checkbox" name="Data4" value="option4" /&gt; &lt;label for="checkbox-4"&gt;CSS&lt;/label&gt; &lt;br /&gt; &lt;input id="checkbox-5" type="checkbox" name="Data5" value="option5" /&gt; &lt;label for="checkbox-5"&gt;HTML&lt;/label&gt; &lt;br /&gt; &lt;input id="checkbox-6" type="checkbox" name="Data6" value="option6" /&gt; &lt;label for="checkbox-6"&gt;CSS&lt;/label&gt; &lt;/div&gt; </code></pre> <p><strong>jQuery</strong></p> <pre><code>$(document).ready(function () { $('#count').on('change', function () { $('input[type=checkbox]').prop('checked', false); $('[data-toggle]').data('toggle', false); }); $('input[type=checkbox]').on('change', function () { if ($('input[type=checkbox]:checked').length &gt; $('#count').val()) { $(this).prop('checked', false); } }); $('.checkbox').on('click', function (e) { var cnt = $('input[type="checkbox"]:checked').length; var cntSel = $('select').val(); var fin = cntSel - cnt; var min = $('.checkbox').data('min'); if (e.target.className == "checkbox") { if ($(this).data('toggle') == false) { $(this).data('toggle', true); $(this).find('input[type="checkbox"]:lt(' + fin + ')').prop('checked', true); } else { $(this).data('toggle', false); $(this).find('input[type="checkbox"]').prop('checked', false); } } }); }); </code></pre> <p>How can i do this, can anyone help me out.</p> <p><strong>Edit1:</strong></p> <ol> <li>Here in this fiddle, user can check a check boxes from both div's based on select box value.</li> <li>check box count should not exceed select box value.</li> <li>And we should consider the 'data-min' value also.</li> </ol> <p>for example,</p> <ul> <li>if i have selected value '4' from selectbox then i'm able to check only 4-checkboxes (total)</li> <li>and from a div should contain minimum no('data-min') of checkboxes should checked, otherwise we need to restrict user to check the checkboxes from that div.</li> </ul>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload