Custom function to limit selections is not working
Question
I have a html form having 7 songs with checkboxes, Users can only select up to 5 songs. I created a js function to do this. It works nice if I go selecting songs and prevent selecting 6th song and show alert message. But once I have selected 5 songs and try to deselect any song, it also prevent we to do so and show the same alert.
here is my HTML markup (sorry for the table layout this is my client's choice, he only want table even if I can do the same without the table)
<form id="apc-form" dir="rtl" method="post" action="ap-contact-form.php">
<table id="apc-table">
<tbody>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 1</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></i></td>
<td class="song-name">Song 2</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 3</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 4</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 5</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 6</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 7</td>
</tr>
</tbody>
</table>
</div>
<button id="submit" type="submit">שלח</button>
</form>
and JQuery codes
var apcSongs =
{
init: function() {
var sCheckbox = $('#apc-table .song-select');
var form = $('#apc-form');
form.submit(function(e) {
apcSongs.validateMin();
});
sCheckbox.click(function(e) {
var selectedSongs = $('#apc-table').find('tr.selected');
console.log(selectedSongs.length);
if (selectedSongs.length < 5) {
$(this).parent().parent().toggleClass('selected');
} else {
alert('You can\'t choose more than 5 songs');
return false
}
});
},
validateMin: function() {
var selectedSongs = $('#apc-table').find('tr.selected');
if (selectedSongs.length == 0)
{
alert('You must select at least 1 song');
return false
}
}
}
apcSongs.init();
You can check this jsbin
Please check my code and tell me what can I do with my codes so that it doesn't show alert on deselecting. If you know a batter way to do this please tell me.
3 answers
solution1
2 2013-10-28 15:25:12
When a checkbox is clicked, you need to check if it's checked. If it's checked, that means it's now being unchecked, and therefore you should let the user click.
solution2
1 2013-10-28 15:27:36
You can use something likethis
<html>
<head><title>Login page</title></head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input[type=checkbox][name=ck]").click(function() {
if( $("input[type=checkbox][name=ck]:checked").length > 5)
{
alert("You can select only 5");
$(this).prop('checked', false);
}
});
});
</script>
<body>
<table id="apc-table">
<tbody>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 1</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></i></td>
<td class="song-name">Song 2</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 3</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 4</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 5</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 6</td>
</tr>
<tr>
<td class="song-checkbox"><input type="checkbox" name="ck" class="song-select"></td>
<td class="song-icon"></td>
<td class="song-name">Song 7</td>
</tr>
</tbody>
</table>
</body>
</html>
solution3
1 ACCPTED 2013-10-28 15:30:06
In your js :
replace
if (selectedSongs.length < 5 ) {
by
if (selectedSongs.length < 5 || ! $(this).is(':checked')) {
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.