Monday, 9 September 2013

check all checkboxes in a parent div, onclick using jQuery based on selectbox value

check all checkboxes in a parent div, onclick using jQuery based on
selectbox value

Here i want to solve two issues,
I've got a bunch of checkboxes, I would like to restrict the user to check
the checkboxes based on selectbox value.
There are two div.checkbox, i want to check all checkboxes while clicking
on parent div based on selectbox value
From above, i have solved first issue.
but how can i solve second one
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" 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"
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);
});
$('input[type=checkbox]').on('change', function(){
if($('input[type=checkbox]:checked').length > $('#count').val()){
$(this).prop('checked', false);
}
});
});
Can anyone help me out.

No comments:

Post a Comment