用於限制選擇的自定義功能不起作用

Question

我有一個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

請檢查我的代碼並告訴我如何處理我的代碼，以便在取消選擇時不顯示警告。 如果你知道一種擊球方式，請告訴我。

Answer 1

單擊復選框時，您需要檢查是否已選中。 如果選中它，則表示它現在未被選中，因此您應該讓用戶單擊。

Answer 2

你可以使用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>

Answer 3

在你的js中：

更換

   if (selectedSongs.length < 5 ) {

通過

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

用於限制選擇的自定義功能不起作用

問題描述

3 個解決方案

解決方案1
2 2013-10-28 15:25:12

解決方案2
1 2013-10-28 15:27:36

解決方案3
1 已采納 2013-10-28 15:30:06

用於限制選擇的自定義功能不起作用

問題描述

3 個解決方案

解決方案1 2 2013-10-28 15:25:12

解決方案2 1 2013-10-28 15:27:36

解決方案3 1 已采納 2013-10-28 15:30:06

解決方案1
2 2013-10-28 15:25:12

解決方案2
1 2013-10-28 15:27:36

解決方案3
1 已采納 2013-10-28 15:30:06