1

我有一个带有 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

请检查我的代码并告诉我我可以用我的代码做什么，这样它就不会在取消选择时显示警报。如果你知道如何做到这一点，请告诉我。

4

3 回答 3

2

单击复选框时，您需要检查它是否被选中。如果它被选中，这意味着它现在被取消选中，因此你应该让用户点击。

于 2013-10-28T15:25:12.800 回答
1

你可以使用类似的东西

<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>
于 2013-10-28T15:27:36.517 回答
1

在你的 js 中：

代替

   if (selectedSongs.length < 5 ) {

经过

  if (selectedSongs.length < 5 ||  ! $(this).is(':checked')) {
于 2013-10-28T15:30:06.633 回答