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

你可以使用这样的东西

<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 个答案: