javascript - 限制选择的自定义功能不起作用

Question

我有一个带有复选框的 7 首歌曲的 html 表单，用户最多只能选择 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

请检查我的代码并告诉我如何处理我的代码，这样它才不会在取消选择时显示警告。如果您知道执行此操作的连击方法，请告诉我。

Answer 1

当一个复选框被点击时，你需要检查它是否被选中。如果它被选中，则意味着它现在未被选中，因此您应该让用户点击。