Restricting user to check checkboxes based on minimum value using jQuery
Here i have bunch of check boxes within their respective div's.
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.
Demo:Fiddle
HTML
<select id="count">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<br/>
<br/>
<div class="checkbox" data-toggle="false" data-min="2"
style='float:left;background:yellow;width:100px'>
<input id="checkbox-1" type="checkbox" name="Data1" value="option1" />
<label for="checkbox-1">HTML</label>
<br />
<input id="checkbox-2" type="checkbox" name="Data2" value="option2" />
<label for="checkbox-2">CSS</label>
<br />
<input id="checkbox-3" type="checkbox" name="Data3" value="option3" />
<label for="checkbox-3">HTML</label>
<br />
</div>
<div class="checkbox" data-toggle="false" data-min="2"
style='float:left;margin-left:100px;background:brown;width:100px'>
<input id="checkbox-4" type="checkbox" name="Data4" value="option4" />
<label for="checkbox-4">CSS</label>
<br />
<input id="checkbox-5" type="checkbox" name="Data5" value="option5" />
<label for="checkbox-5">HTML</label>
<br />
<input id="checkbox-6" type="checkbox" name="Data6" value="option6" />
<label for="checkbox-6">CSS</label>
</div>
jQuery
$(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 > $('#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);
}
}
});
});
How can i do this, can anyone help me out.
No comments:
Post a Comment