用于限制选择的自定义功能不起作用
[英]Custom function to limit selections is not working
问题描述
I have a html form having 7 songs with checkboxes, Users can only select up to 5 songs. 
我有一个html表单，有7首带复选框的歌曲，用户最多只能选择5首歌曲。 I created a js function to do this. 我创建了一个js函数来执行此操作。 It works nice if I go selecting songs and prevent selecting 6th song and show alert message. 如果我选择歌曲并阻止选择第6首歌曲并显示警告信息，它会很好用。 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. 但是，一旦我选择了5首歌曲并尝试取消选择任何一首歌曲，它也会阻止我们这样做并显示相同的提示。
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) 这是我的HTML标记（抱歉桌面布局这是我的客户的选择，他只想要桌子，即使我可以在没有桌子的情况下做同样的事情）
<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 和JQuery代码
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 你可以查看这个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 个解决方案
解决方案1
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. 如果选中它，则表示它现在未被选中，因此您应该让用户单击。
解决方案2
1 2013-10-28 15:27:36
You can use something likethis 你可以使用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>
解决方案3
1 已采纳 2013-10-28 15:30:06
In your js : 在你的js中：
replace 更换
if (selectedSongs.length < 5 ) {
by 通过
if (selectedSongs.length < 5 || ! $(this).is(':checked')) {
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.