用于限制选择的自定义功能不起作用(Custom function to limit selections is not working)

用于限制选择的自定义功能不起作用(Custom function to limit selections is not working)

我有一个html表单，有7首带复选框的歌曲，用户最多只能选择5首歌曲。 我创建了一个js函数来执行此操作。 如果我选择歌曲并阻止选择第6首歌曲并显示警告信息，它会很好用。 但是，一旦我选择了5首歌曲并尝试取消选择任何一首歌曲，它也会阻止我们这样做并显示相同的提示。

这是我的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>

和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();

你可以查看这个jsbin

请检查我的代码并告诉我如何处理我的代码，以便在取消选择时不显示警告。 如果你知道一种击球方式，请告诉我。

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.

最满意答案

在你的js：

更换

if (selectedSongs.length < 5 ) {

通过

if (selectedSongs.length < 5 || ! $(this).is(':checked')) {

In your js :

replace

if (selectedSongs.length < 5 ) {

by

if (selectedSongs.length < 5 || ! $(this).is(':checked')) {